Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
2 views

Lecture 05 CSS

Uploaded by

IRFAN MUGHAL
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

Lecture 05 CSS

Uploaded by

IRFAN MUGHAL
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 70

Web Engineering

CSS

1 9/15/2024
CSS

• What is CSS
– CSS is a document that defines rules for layout of
web application frontend.
– For example,
• you can specify that the background of the page is cream,
all paragraphs should appear in gray using the Arial
typeface, or that all level one headings should be in a blue,
italic, Times typeface.

2 9/15/2024
CSS

• CSS Rule

– A CSS rule contains two parts: a selector and a


declaration.

3 9/15/2024
CSS

• CSS Rule
– The previous rule indicates that all elements should
be shown in the Arial typeface.

– Selectors indicate which element (in this case p is an


element) the rule applies to. The same rule can apply
to more than one element if you separate the
element names with commas.

– Declarations indicate how the elements referred to in


the selector should be styled
4 9/15/2024
CSS

• In a rule, there can be more than 1 element associated


with declaration. Example h1, h2, h3 in following screen
are associated with declaration.

Declaration

• This rule indicates that all , <h1>, <h2>, and <h3>


elements should be shown in the Arial typeface, and in
a yellow color.

5 9/15/2024
CSS

• Properties indicate the aspects of the element you want


to change. For example, color, font, width, height and
border.
• Values specify the settings you want to use for the
chosen properties. For example, if you want to specify a
color property then the value is the color you want the
text in these elements to be.
6 9/15/2024
HTML tags: Link Tag

7 9/15/2024
CSS

• Referring CSS in web page


– Inline
• styles are placed right where you need them, next to the
text you wish to decorate.
– Internal
• styles are placed at the top of each web page document,
before any of the content is listed.
– External
• External style sheets are separate files full of CSS
instructions. You need to refer this file in your html
document.
• Example
– <link href="example.css" type="text/css“ rel="stylesheet" />

8 9/15/2024
CSS

• Example of inline CSS


– <h1 style="color:yellow">From Garden to Plate</h1>

9 9/15/2024
Internal CSS

• CSS rules can be included within an HTML page by placing them


inside a <style> element, which usually sits inside the <head>
element of the page.

– The <style> element should use the type attribute to indicate


that the styles are specified in CSS. The value should be
text/css.

10 9/15/2024
Internal CSS

11 9/15/2024
External CSS

• There can be 2 documents:


– An HTML Page
– A CSS File

HTML uses the <link> element


to indicate where the CSS file is
located.

12 9/15/2024
External CSS
• <LINK>
– The <link> element can be used in an HTML document to tell the browser where
to find the CSS file used to style the page. It lives inside the <head> element. It
should use three attributes:

– href
• This specifies the path to the CSS file (which is often placed in a
folder called css or styles).
– type
• Attribute specifies the type of document being linked to. The
value should be text/css.
– rel
• Specifies the relationship between the HTML page and the file it
is linked to. The value should be stylesheet when linking to a
CSS file.

13 9/15/2024
External CSS

CSS

HTML

14 9/15/2024
CSS Selectors

• There are many different types of CSS selector that


allow you to target rules to specific elements in an
HTML document.
• Universal Selector
• Type Selector
• Class Selector
• ID Selector
• Child Selector
• Descendant Selector
• Adjacent Sibling
• Selector
• General Sibling
• Selector

15 9/15/2024
CSS selectors

16 9/15/2024
CSS Selector

17 9/15/2024
Rules for Applying CSS

• If there are two or more rules that apply to the


same element, it is important to understand
which will take precedence.

18 9/15/2024
• If there are two or more
rules that apply to the
same element, it is
important to understand
which will take
precedence.
• LAST RULE
• If the two selectors
are identical, the latter
of the two will take
precedence. Here you
can see the second i
selector takes
precedence over the
first.

19 9/15/2024
SPECIFICITY
If one selector is more
specific than the others, the
more specific rule will take
precedence over more
general ones. In this
example:

h1 is more specific than *

p b is more specific than p

p#intro is more specific than


p

20 9/15/2024
IMPORTANT
You can add !important after
any property value to indicate
that it should be considered
more important than other
rules that apply to the same
element.

21 9/15/2024
SELECTORS

22 9/15/2024
Border

• border-width
– The border-width property is used to control the
width of a border. The value of this property can
either be given in pixels or using one of the following
values:
• thin
• medium
• thick

23 9/15/2024
Border

• border-width
– You can control the individual size of borders using
four separate properties:
• border-top-width
• border-right-width
• border-bottom-width
• border-left-width
– You can also specify different widths for the four
border values in one property, like so:
• border-width: 2px 1px 1px 2px;

24 9/15/2024
Example

25 9/15/2024
output

26 9/15/2024
Border Style Example

• Border Style Example

27 9/15/2024
• output

28 9/15/2024
List Property

• The list-style-type property allows you to control


the shape or style of a bullet point (also known
as a marker).
• Unordered Lists
– For an unordered list you can use the following
values:
none
• disc
ocircle
▪square
29 9/15/2024
List Property

• Ordered List
– For an ordered (numbered) list you can use the following
values:
– decimal
• 123
– decimal-leading-zero
• 01 02 03
– lower-alpha
• abc
– upper-alpha
• ABC
– lower-roman
• i. ii. iii.
– upper-roman
• I II III

30 9/15/2024
List: Example

31 9/15/2024
32 9/15/2024
Table Example

33 9/15/2024
Table Example

34 9/15/2024
Table example

• Output

35 9/15/2024
Page Padding

• Padding describes the position of an element with


respect to other element.
• For Example
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 10px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}

36 9/15/2024
CSS Box Model

37 9/15/2024
Example

38 9/15/2024
Output

39 9/15/2024
LAYOUT ELEMENTS
• Websites often display content in multiple columns

– <header> Defines a header for a document or a section


– <nav> Defines a container for navigation links
– <section> Defines a section in a document
– <article> Defines an independent self-contained article
– <aside> Defines content aside from the content (like a sidebar)
– <footer> Defines a footer for a document or a section
– <details> Defines additional details
– <summary> Defines a heading for the <details> element

40 9/15/2024
WEBSITE LAYOUT

41 9/15/2024
WEBSITE LAYOUT

42 9/15/2024
WEBSITE LAYOUT

43 9/15/2024
CONTENT
• 1-column (often used for mobile browsers)
• 2-column (often used for tablets and laptops)
• 3-column layout (only used for desktops)

44 9/15/2024
WEBSITE LAYOUT

45 9/15/2024
WEBSITE LAYOUT

46 9/15/2024
WEBSITE LAYOUT

47 9/15/2024
WEBSITE LAYOUT

48 9/15/2024
WEBSITE LAYOUT

49 9/15/2024
WEBSITE LAYOUT

50 9/15/2024
IMAGES

51 9/15/2024
IMAGES

52 9/15/2024
IMAGES

53 9/15/2024
IMAGES

54 9/15/2024
IMAGES

55 9/15/2024
COLORS

• The color property to specify the color of text inside an element


• Computer monitors are made up of thousands of tiny squares called pixels
• Every color is created by mixing amounts of RED, GREEN, and BLUE

RGB VALUES HEX CODES COLOR NAMES


Values for red, green, and blue Hex values represent values for Colors are represented by
are expressed as numbers red, green, and blue in predefined names. However, they
between 0 and 255. hexadecimal code. are very limited in number.

rgb(102,205,170) #66cdaa MediumAquaMarine

102 red value of the red, 102, is There are 147 color names
205 green expressed as 66 supported by browsers
170 blue 205 of the green is expressed
as cd
the 170 of blue equates to aa.

56 9/15/2024
COLORS
HUE SATURATION BRIGHTNESS
Hue is near to the Saturation refers to the Brightness (or "value") refers
colloquial idea of color. amount of gray in a color. to how much black is in a color.

At maximum saturation, At maximum brightness, there


there would be no gray in the would be no black in the color.
color.
At minimum brightness, the
At minimum saturation, the color would be very dark.
color would be mostly gray.

57 9/15/2024
COLORS

58 9/15/2024
COLORS

59 9/15/2024
HTML CSS – Visual Studio

60 9/15/2024
HTML CSS – Visual Studio

61 9/15/2024
HTML CSS – Visual Studio

62 9/15/2024
HTML CSS – Visual Studio

63 9/15/2024
HTML Page – Visual Studio

64 9/15/2024
HTML CSS – Visual Studio

65 9/15/2024
HTML CSS – Visual Studio

66 9/15/2024
HTML CSS – Visual Studio

67 9/15/2024
HTML CSS – Visual Studio

68 9/15/2024
HTML CSS – Visual Studio

69 9/15/2024
HTML Page – Visual Studio

70 9/15/2024

You might also like