Css 001

8/9/2019 Css 001

1/111

CSSCASCADE

8/9/2019 Css 001

2/111

A quickbackgroundon CSS rules

8/9/2019 Css 001

3/111

CSS rulestell browsers how torender elements in an HTML

document.

h2

{

color: blue;margin: 1em;

}

8/9/2019 Css 001

4/111

The selector "selects" theelements in an HTML

document that are to be styled.

h2

{


}

Selector

8/9/2019 Css 001

5/111

The declaration tells abrowser how to style the

element.

h2

{


}

Declaration

8/9/2019 Css 001

6/111

The property is the aspect ofthat element that you are

choosing to style.

h2

{


}

Property

8/9/2019 Css 001

7/111

The value is the exact styleyou wish to set for the

property.

h2

{


}

Value

8/9/2019 Css 001

8/111

Types ofstyle sheets

8/9/2019 Css 001

9/111

HTML documents may havethree types of style sheets

applied to them.

8/9/2019 Css 001

10/111

Browser style sheetsBrowsers apply style sheets to

all web documents. These arereferred to as a "default"

browser style sheet.

8/9/2019 Css 001

11/111

User style sheetsMost modern browsers allow

users to apply their own stylesheets within the browser.

8/9/2019 Css 001

12/111

8/9/2019 Css 001

13/111

Author styles

8/9/2019 Css 001

14/111

There are three methods thatauthors can use to add CSS

styles to an HTML document

8/9/2019 Css 001

15/111

Inline styles are applied toelements in the HTML code

using the style attribute.

Heading here

Inline style using style attribute

8/9/2019 Css 001

16/111

Header styles are placed inthe head of the document

using the style element

Document title

8/9/2019 Css 001

17/111

External style sheets areapplied using the link or

@import.

Document title

External style using link element

8/9/2019 Css 001

18/111

CSS rule

overload!

8/9/2019 Css 001

19/111

Browsershave to deal withCSS rules coming from the

browser, user and authorstyle sheets.

8/9/2019 Css 001

20/111

Browsers also have to dealwith CSS rules coming from

different types of author stylesheets (external, header and

inline)

8/9/2019 Css 001

21/111

At some point, Browsershave to deal with CSS rules

that conflict.

8/9/2019 Css 001

22/111

What does

conflict

mean?

8/9/2019 Css 001

23/111

Conflict is where more thanone CSS rule refers to the

same element and property.

h2 { color: blue; }

h2 { color: red; }

Conflicting CSS rules

8/9/2019 Css 001

24/111

Conflict can occur betweenCSS rulesin different types

of style sheets.

h2 { color: blue; }

h2 { color: red; }

Browse style sheet

Author style sheet

8/9/2019 Css 001

25/111

Conflict can occur betweenCSS rulesin within the one or

more author style sheets.

h2 { color: blue; }

h2 { color: red; }

h2 { color: green; }

Author style sheet 1

Author style sheet 2

8/9/2019 Css 001

26/111

So which

CSS rules

win?

8/9/2019 Css 001

27/111

There arefour stepsto determine which CSS rules

will win (be applied to anHTML document)

8/9/2019 Css 001

28/111

Step 1

8/9/2019 Css 001

29/111

Gather all the declarationsthat apply to anelement and

property from browser, authorand user style sheets

8/9/2019 Css 001

30/111

For example, find anydeclarations that matches:

element = h2

property = color

8/9/2019 Css 001

31/111

Browser style sheet

User style sheet

Author style sheets

h2 { color: black; }


h2 { color: blue; }

#nav h2 { color: lime; }

Gathered declarations

8/9/2019 Css 001

32/111

If there are declarations frommore than oneof these three

sources, proceed to step 2.

8/9/2019 Css 001

33/111

Step 2

8/9/2019 Css 001

34/111

Sort the gathered declarationsaccording to origin (browser,

author, user style sheets) andimportance (normal or

!important).

8/9/2019 Css 001

35/111

What is!important?

8/9/2019 Css 001

36/111

Authors can assign!important to any

declaration.

h2 { color: red !important;}

!important

8/9/2019 Css 001

37/111

"!important" declarationsoverride normal declarations

(Normal declarations aredeclarations that do not

contain !important).

8/9/2019 Css 001

38/111

So, how aredeclarations

sorted?

8/9/2019 Css 001

39/111

browser styles

normal declarations in user style sheet

normal declarations in author style sheet

!important declarations in author style sheet

!important declarations in user style sheet

1

2

3

4

5

From lowest to highest priority

8/9/2019 Css 001

40/111

Browser style sheet

User style sheet

Author style sheets


If no other declarations exist,

browser declarations win

1. Browser styles

8/9/2019 Css 001

41/111

Browser style sheet

User style sheet

Author style sheets



2. Normal user styles

Normal user declarations beat

browser declarations

8/9/2019 Css 001

42/111

Browser style sheet

User style sheet

Author style sheets



h2 { color: blue; }

3. Normal author styles

Normal author declarations beat browser

declarations and normal user declarations

8/9/2019 Css 001

43/111

Browser style sheet

User style sheet

Author style sheets



h2 { color: blue; }

h2 { color: lime !important; }

!important author declarations beat

all normal declarations

4. !important author styles

8/9/2019 Css 001

44/111

Browser style sheet

User style sheet

Author style sheets



h2 { color: red !important;}

h2 { color: blue; }

h2 { color: lime !important; }

5. !important user styles

!important user declarations beat !important author

declarations and all normal declarations

8/9/2019 Css 001

45/111

But what if two declarationshave the sameorigin

or importance?

8/9/2019 Css 001

46/111

Browser style sheet

User style sheet

Author style sheets



h2 { color: blue; }

h2 { color: lime; }

Two declarations with the same origin and importance

Two matching declarations

8/9/2019 Css 001

47/111

If declarations have the sameorigin or importance then

proceed to Step 3.

8/9/2019 Css 001

48/111

Step 3

8/9/2019 Css 001

49/111

If declarations have the sameorigin or importance then the

declarations selectors needto be scored, to see which

declaration will win.

8/9/2019 Css 001

50/111

Selectors

#nav h2 { color: blue; }h2.intro { color: red; }

Selectors

8/9/2019 Css 001

51/111

Four scores are concatenated(linked together as a chain) to

create a final score.

a,b,c,d

8/9/2019 Css 001

52/111

This score is referred to as aselectors specificity.

8/9/2019 Css 001

53/111

So how isspecificity

calculated?

8/9/2019 Css 001

54/111

A. Is there an inline style?

This is a heading

Here is a paragraph of

a = 1 x inline stylesb = 0 x IDc = 0 x classesd = 0 x element

Specificity = 1,0,0,0

8/9/2019 Css 001

55/111

B. Count the number of IDsin the selectors.

#nav { color: red; }



8/9/2019 Css 001

56/111

C. Count the number ofclasses, attributes and

pseudo-classes.

.main { color: red; }



8/9/2019 Css 001

57/111

D. Count the number ofelement names or pseudo-

elements.

h2 { color: red; }



8/9/2019 Css 001

58/111

A note on

concatenation

8/9/2019 Css 001

59/111

A will always beat B, whichwill always beat C, which will

always beat D.

8/9/2019 Css 001

60/111

No matter how many IDs areused in a selector, an inline

style will always win.(unless !important is used within the IDs declaration)

External style sheets

d h d t l#one #two #three #four #five

8/9/2019 Css 001

61/111

and header styles

(Author styles)

#six #seven #eight #nine #ten

{ color: green; }

HTML document with

inline styles

(Author styles)

The highlighted style wins due to specificity -

1,0,0,0 beats 0,10,0,0

8/9/2019 Css 001

62/111

No matter how many classesare applied to a selector, an ID

can easily win

8/9/2019 Css 001

63/111


and header styles(Author styles)

.one .two .three .four .five

.six .seven .eight .nine .ten

{ color: green; }

#nav { color: lime; }

The highlighted selector wins due to specificity -

0,1,0,0 beats 0,0,10,0

8/9/2019 Css 001

64/111

No matter how many elementsare applied to a selector, a

class can easily win.

8/9/2019 Css 001

65/111



div div div div div form

fieldset div label span

{ color: green; }

.intro { color: lime; }


0,0,1,0 beats 0,0,0,10

8/9/2019 Css 001

66/111

Complexexamples ofspecificity

8/9/2019 Css 001

67/111

ID and element

#nav h2 { color: red; }

a = 0 x inline stylesb = 1 x ID (#nav)c = 0 x classesd = 1 x element (h2)Specificity = 0,1,0,1

8/9/2019 Css 001

68/111

Element and class

h2.intro { color: red; }

a = 0 x inline stylesb = 0 x IDc = 1 x classes (.intro)d = 1 x element (h2)Specificity = 0,0,1,1

8/9/2019 Css 001

69/111

ID, elements and pseudo-class

#nav ul li a:hover { color:

a = 0 x inline stylesb = 1 x ID (#nav)c = 1 x pseudo-class (:hover)d = 3 x elements (ul, li, a)Specificity = 0,1,1,3

8/9/2019 Css 001

70/111

Element and pseudo-element

p:first-line { color: green

a = 0 x inline stylesb = 0 x IDc = 0 x classes

d = 2 x element (p) and pseudo-element (:first-line)Specificity = 0,0,0,2

8/9/2019 Css 001

71/111

h2[title=intro] { color:

Element and attribute selector

a = 0 x inline stylesb = 0 x IDc = 1 x attribute selector ([title=intro])

d = 1 x element (h2)Specificity = 0,0,1,1

8/9/2019 Css 001

72/111

What if there

is still no

clear winner?

8/9/2019 Css 001

73/111


#nav h2 { color: green; }

Selectors with same specificity


8/9/2019 Css 001

74/111

If there is still no clear winnerthen proceed to Step 4.

8/9/2019 Css 001

75/111

Step 4

8/9/2019 Css 001

76/111

If two declarations have thesame importance, origin and

specificity, the latter specifieddeclaration wins

8/9/2019 Css 001

77/111

#nav h2 { color: green; }


Equal-weight declarations

The second declaration wins

as it is written after the first.

8/9/2019 Css 001

78/111

And nowa guessing

game

8/9/2019 Css 001

79/111

Exercise 1browser, user, author

8/9/2019 Css 001

80/111

Part 1: Which one wins?

Browser style sheet h2 { color: black; }

8/9/2019 Css 001

81/111

User style sheet

External style sheetsand header styles

(Author styles)

HTML document with

inline styles

(Author styles)



8/9/2019 Css 001

82/111

User style sheet


(Author styles)

HTML document with

inline styles

(Author styles)


Normal user declarations beats browser

declarations due to origin

8/9/2019 Css 001

83/111



8/9/2019 Css 001

84/111

User style sheet


(Author styles)

HTML document with

inline styles

(Author styles)


h2 { color: blue; }


8/9/2019 Css 001

85/111

User style sheet


(Author styles)

HTML document with

inline styles

(Author styles)


h2 { color: blue; }

Normal author declarations beat browser andnormal user declarations due to origin


8/9/2019 Css 001

86/111

a


8/9/2019 Css 001

87/111

User style sheet


(Author styles)

HTML document with

inline styles

(Author styles)


h2 { color: blue; }


8/9/2019 Css 001

88/111

User style sheet


(Author styles)

HTML document with

inline styles

(Author styles)


h2 { color: blue; }

Normal inline declarations beat normal

external and header declarations due tospecificity: 1,0,0,0 beats 0,0,0,1


8/9/2019 Css 001

89/111


8/9/2019 Css 001

90/111

User style sheet


(Author styles)

HTML document with

inline styles

(Author styles)


h2 { color: blue; }h2 { color: lime !important; }


8/9/2019 Css 001

91/111

User style sheet


(Author styles)

HTML document with

inline styles

(Author styles)



!important author declarations beat normal

browser, user and author declarations


8/9/2019 Css 001

92/111


8/9/2019 Css 001

93/111

User style sheet


(Author styles)

HTML document with

inline styles

(Author styles)




8/9/2019 Css 001

94/111

User style sheet


(Author styles)

HTML document with

inline styles

(Author styles)



!important inline author declarations beat

!important external author and header declarationsdue to specificity: 1,0,0,0 beats 0,0,0,1


8/9/2019 Css 001

95/111


8/9/2019 Css 001

96/111

User style sheet


(Author styles)

HTML document with

inline styles

(Author styles)


h2 { color: gray !important; }



!important user declarations beat !important

author declarations (regardless of whether they

are external header or inline)

8/9/2019 Css 001

97/111

User style sheet


(Author styles)

HTML document with

inline styles

(Author styles)


h2 { color: gray !important; }


are external, header or inline)

8/9/2019 Css 001

98/111

Exercise 2author external, header

and inline CSS


8/9/2019 Css 001

99/111

8/9/2019 Css 001

100/111



h2.news { color: #eee; }

h2 { color: blue; }

The highlighted declaration wins due to

specificity - 0,0,1,1 beats 0,0,0,1

8/9/2019 Css 001

101/111




h2 { color: blue; }


8/9/2019 Css 001

102/111

8/9/2019 Css 001

103/111




h2 { color: blue; }h2.news { color: green; }

The highlighted declaration has the same

specificity as the first declaration (0,0,1,1).

However, as it is written later, it wins!

8/9/2019 Css 001

104/111




h2 { color: blue; }h2.news { color: green; }

, ,


8/9/2019 Css 001

105/111

8/9/2019 Css 001

106/111




h2.news { color: #eee; }h2 { color: blue; }

h2.news { color: green; }


0,1,0,1 beats 0,0,1,1 and 0,0,0,1

8/9/2019 Css 001

107/111







8/9/2019 Css 001

108/111

8/9/2019 Css 001

109/111






div#nav h2 { color: lime; }


0,1,0,2 beats 0,1,0,1 and 0,0,1,1 and 0,0,0,1

8/9/2019 Css 001

110/111






div#nav h2 { color: lime; }

8/9/2019 Css 001

111/111

Were done!

Documents

Css 001