The CSS cascade

Derek Bridge

Department of Computer Science,
University College Cork

The CSS cascade

Aims:

• to understand the idea of inheritance in CSS
• to know what a rule conflict is in CSS
• to understand the cascade in CSS

Inheritance

• Many CSS properties (but not all) are inherited

  inheritance in CSS

  a property applied to an element is also automatically applied to the element's descendants

Over-riding inheritance

• The inheritance of a property is blocked if some other CSS rule specifies a value for that property
• Class exercise: What colour will "CS1102" be? What colour will "Internet Computing" be?
  • (X)HTML:

    <h1>CS1102 <em>Internet Computing</em></h1>
    

  • CSS:

    h1 {color: red;}
    em {color: blue;}
    

Conflicts

• Often the same element may be selected by more than one rule
• It's not a problem in this case:

  h1 {color: red;}
  h1 {font-style: italic;}
  

• But it is a problem in this case:

  h1 {color: red;}
  h1 {color: blue;}
  

Conflicts

• The problem is often less obvious, e.g.

  body {color: red;}
  h3 {color: blue;}
  .cocktail {color: green;}
  

  in mojitos.html

Resolving conflicts: origin

• Stylesheets have different origins
  1. author stylesheets
  2. user stylesheets
  3. the browser's default stylesheet
• (Simplified) If two rules conflict, author rules win over user rules, which win over browser rules

Resolving conflicts: specificity

• But suppose both rules come from the same stylesheet...
• Some selectors are more specific than others
• Roughly(!), selecting by id is the most specific, then selecting by class
• Then, a selector with more descendants is more specific
• If two rules conflict, the more specific wins

Resolving conflicts: specificity

Class exercise: Which is the more specific in each of these pairs of rules

h3 {color: blue;}
.cocktail {color: green;}

p em {color: yellow;}
em {color: gray;}

#instructions .action {color: teal;}
div ol li span {color: purple;}

Resolving conflicts: ordering

• But suppose both rules have the same specificity...
• In that case, the order in which rules appear is relevant:

  h1 {color: red;}
  h1 {color: blue:}
  

• If two rules conflict, the later rule wins
• Note the way that the conflict resolution cascades:
  1. importance
  2. origin
  3. specificity
  4. order
  and when rules select an element, they beat inheritance

Class exercise

In the first paragraph of mojitos.html, what colour will the word "Mojitos" be and what colour will the rest of the paragraph be?

body p {color: red;}
p span {color: blue;}
#intro {color: green;}