Cascading Style Sheets

1
Cascading Style Sheets

• The Cascade Mechanism
• by Tina McDuffie

2
CSS The Cascade

• When multiple style sheets are used, style sheets
  may fight over control of a particular selector.
• There must be rules to determine which rule wins
  control.
• The cascade mechanism applies these rules.

3
The Cascade Mechanism

• 4 characteristics help determine the outcome of
  contradictory style sheets
• !important
• The origin of the rules (authors or readers)
• Selector rules calculating specificity
• Order of specification

4
!important

• Rules can be designated as important
• STRONG font-weight bold !important
• !important rules win out over contradictory
  styles of otherwise equal weight.
• In CSS1, authors !important rules will override
  readers !important rules.
• Authors should be wary of overriding readers
  rules.

5
Origin of Rules

• Both authors and readers can specify style sheet
  rules.
• Currently reader specification is extremely
  limited.
• In CSS1, author rules win out over reader rules.
• In CSS2, reader rules win out over author rules.

6
Selector Rules Calculating Specificity

• Level of specificity helps determine which rule
  wins.
• A more specific style rule will always win out
  over less a less specific rule.
• Calculating specificity is a counting game.

7
The Counting Game

• 1. Count the number of ID attributes in the
  selector.
• 2. Count the number of CLASS attributes in the
  selector.
• 3. Count the number of HTML tag names in the
  selector.
• Write the 3 numbers in exact order with no spaces
  or commas to obtain a 3-digit number.

8
Example

• ltHTMLgtltHEADgt
• ltSTYLE TYPEtext/cssgtlt!--
• id1 font-weight bold / a1 b0 c0 sp100
• UL UL LI.red font-weight bold / a0 b1 c3
  sp013
• LI.red font-weight bold / a0 b1 c1 sp011
• LI font-weight bold / a0 b0 c1 sp001
• --gt
• lt/STYLEgtlt/HEADgt
• ltBODYgt
• ltULgtltULgtltLI CLASSredgtidid1gtsome
  textlt/LIgtlt/ULgtlt/ULgt
• lt/BODYgt
• lt/HTMLgt

9
Order of Specification

• When two rules have the same weight, the last
  rule specified wins.