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 "I like the…family" be? What colour will "Vombatus ursinus" be?
  • HTML:

    <p>I like the <i>Vombatus ursinus</i> family</p>

  • CSS:

    p 
    {
        color: red;
    }
    
    i
    {
        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.

  section 
  {
      color: blue;
  }
  
  #instructions 
  {
      color: green;
  }

  in mojitos.html

Resolving conflicts: importance and origin

• CSS has a well-defined way of deciding which of several conflicting rules will 'win'
• A full treatment of this would begin by discussing rule importance and rule origin
• We'll look at these two briefly — but you don't need to learn these two

Resolving conflicts: importance

• You can declare a property within a rule to be important:

  h3 
  {
      color: blue !important;
  }

• If two rules conflict, the !important one wins
• Using this is generally a horrible hack — please do not use
• But suppose both or neither are !important…

Resolving conflicts: origin

• Stylesheets have different origins
  1. author stylesheets
  2. user stylesheets
  3. the browser's default stylesheet
• If two rules conflict, the following is the order of precedence:
  1. !important rules from user stylesheets
  2. !important rules from author stylesheets
  3. other rules from author stylesheets
  4. other rules from user stylesheets
  5. the browser's default stylesheet

Resolving conflicts: specificity

• Some selectors are more specific than others
• Roughly(!), selecting by id is the most specific, then selecting by class
• Then, a selector with more children/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

i 
{
    color: blue;
}

.cocktail 
{
    color: green;
}

nav li 
{
    color: yellow;
}

li 
{
    color: gray;
}

#instructions b 
{
    color: teal;
}

ol li b 
{
    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

Resolving conflicts: the cascade

• Note the way that the conflict resolution cascades:
  1. importance/origin
  2. specificity
  3. order
  and when rules select an element, they beat inheritance

Class exercise

In the Instructions section of mojitos.html, what colour will the word "crush" be and what colour will the rest of that list item be?

#instructions 
{
    color: green;
}

li > b 
{
    color: red;
}

section b 
{
    color: blue;
}

section
{
    color: yellow;
}

Conflicts are not irrelevant, just because they're difficult!

• A stylesheet where there is over-riding or conflicts is not necessarily a bad stylesheet
• CSS experts exploit over-riding and conflicts to get a more elegant stylesheet
• E.g. in mojitos.html's navigation menu, suppose we want Cocktails, Finger Food and Party Games to be red, but Cuba Libre, Mojitos, etc. to be blue
• One approach, using rules that don't conflict:

  nav > ul > li
  {
      color: red;
  }
  
  nav li li
  {
      color: blue;
  }

• Another approach, using rules that do conflict:

  nav li
  {
      color: red;
  }
  
  nav li li
  {
      color: blue;
  }

Getting help

• For a more detailed presentation of this material: CSS cascade - a simple step-by-step presentation
• In Chrome, launch the Developer Tools (CTRL-Shift-I): lets you see which styles affect each element