The CSS cascade

Derek Bridge

Department of Computer Science,
University College Cork

The CSS cascade



Over-riding inheritance



Resolving conflicts: origin

Resolving conflicts: specificity

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

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;}