Web Development

Lecture Objectives

• learn about CSS conflicts
• learn how your browser resolves CSS conflicts
• learn that you mustn't forget about inheritance!

A Snippet of HTML

This will be our running example:

<section id="bio">
    <h2>Biography</h2>
    <p>
        I was inspired to take up <i>Taekwondo</i> after
        playing the video game <i class="game">Tekken 3</i>.
    </p>
</section>
    

Conflicts

Often the same element may be selected by more than one rule.

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

h2 {
    color: red;
}
                
h2 {
    color: blue;
}
        

Conflicts

The problem is often less obvious, e.g.

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

Conflicts

For a given property, two or more CSS rules select an element and set different values

Causes of Conflict

• Carelessness!
• When you use multiple stylesheets written by different people.
• But often they are not mistakes — they are deliberate:
  • Web developers exploit conflicts because they can lead to more concise or more easily understood stylesheets.

Resolution of Conflicts

Resolution uses three criteria, taken in this order:

1. Origin
2. Specificity
3. Ordering

But note that this is a simplified explanation.

Origin

• CSS rules can have different origins:

  author stylesheets

  the ones we write

  user-agent stylesheets

  the browser's default stylesheet

• It is because of the user-agent stylesheet that by default, e.g.:
  • em & i elements are in italic;
  • strong, b & h1-h6 elements are bold;
  • h1 headings are bigger than h2 headings;
  • consecutive paragraphs are separated by a blank line;
  • and so on.

Origin

If two rules conflict and one is from an author stylesheet and the other is from the user-agent stylesheet, then the author stylesheet wins.

Specificity

If origin does not resolve a conflict, then we turn to specificity.

The more specific rule wins.

Specificity

• Roughly,
  • Selecting by id is the most specific.
  • Selecting by class is the second most specific.
  • Then, a selector that is longer is more specific.
• * and combinators, such as space, >, +, ~, have no effect on specificity.

Specificity Examples

i {
    color: blue;
}
    
.game {
    color: green;
}
        

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

Specificity Examples

#bio i {
    color: teal;
}
    
section p i {
    color: purple;
}
        

section p i {
    color: teal;
}
    
p > i {
    color: purple;
}
        

Ordering

If origin and specificity do not resolve a conflict, then we turn to ordering.

The later rule wins.

Ordering Example

h2 {
    color: red;
}
            
h2 {
    color: blue;
}
        

Ordering

• Consider the three ways of applying styles to a web page:
  • Inline styles are thought of as coming later than embedded stylesheets, which come later than external stylesheets.
• Suppose there is more than one external stylesheet:
  • Then the order of the link elements is used.

The Cascade

• Note the way that the conflict resolution cascades:
  1. from origin …
  2. … to specificity …
  3. … to ordering.
• But keep in mind this is only for cases of conflict.
• A classic mistake is to use the cascade when you should instead use inheritance and the blocking of inheritance.

Example

"Taekwondo" and "Tekken 3" will be blue, not green!

#bio {
    color: green;
}
                
p > i {
    color: red;
}
                
section i {
    color: blue;
}
                
section {
    color: yellow;
}
        

            <section id="bio">
                <h2>Biography</h2>
                <p>
                    I was inspired to take up <i>Taekwondo</i> after
                    playing the video game <i class="game">Tekken 3</i>.
                </p>
            </section>
        

Exploiting Conflicts

• CSS experts exploit blocking of inheritance and conflicts to get a more elegant stylesheet.
• E.g. suppose we want all i elements to be blue, except ones referring to video games, which should be red.
• A conflict is a natural solution:

            i {
                color: blue;
            }
                
            .game {
                color: red;
            }
        

<section id="bio">
    <h2>Biography</h2>
    <p>
        I was inspired to take up <i>Taekwondo</i> after
        playing the video game <i class="game">Tekken 3</i>.
    </p>
</section>
        

Exercise

<ul>
    <li id="pastry">For the pastry:
        <ul>
            <li class="ingredient">flour</li>
            <li class="ingredient">butter</li>    
        </ul>
    </li>
    <li id="filling">For the filling:
        <ul>
            <li class="ingredient">stewing beef</li>
            <li class="ingredient">an onion</li>
            <li class="ingredient">Guiness</li>
        </ul>
        Optionally, include <b class="ingredient">carrots</b>.
    </li>
</ul>
        

Conflicts & Inheritance

What colour will "flour" be and why?

.ingredient {
    color: red;
}

li {
    color: blue;
}
    

Conflicts & Inheritance

What colour will "flour" be and why?

li {
    color: red;
}

li li {
    color: blue;
}
    

Conflicts & Inheritance

What colour will "flour" be and why?

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

#pastry li {
    color: blue;
}
    

Conflicts & Inheritance

What colour will "flour" be and why?

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

ul li ul li {
    color: blue;
}
    

Conflicts & Inheritance

What colour will "flour" be and why?

#pastry {
    color: red;
}

ul li ul li {
    color: blue;
}
    

Conflicts & Inheritance

What colour will "flour" be and why?

ul ul {
    color: red;
}

li {
    color: blue;
}
    

Conflicts & Inheritance

What colour will "flour" be and why?

#pastry {
    color: red;
}

li {
    color: blue;
}
    

Tips

Tip 1
You need to learn this stuff for the exam.

Tip 2
If you hover over a selector in VSCode, it shows you the specificity (as 3 numbers).

Tip 3
Chrome Developer Tools shows CSS that gets 'eliminated'.

G'luck!