The CSS cascade and inheritance
How the browser chooses between declarations that contradict each other (origin, !important, specificity, order), which properties pass down to children, and the three ways to attach CSS to a page.
- 23 cards
- 4 topics
- Free
The outline, topic by topic
Each topic is weighted the way the exam weighs it.
- Concepts
- Questions
- Sort and link
- Scenarios
A few cards from the deck
Cascade: what is it?
Show the answer
The algorithm that picks a single value when several declarations target the same property of the same element: origin and !important, then specificity, then writing order.
The criteria apply in that order and the first one that settles it decides: writing order only matters when specificity is equal.
What colour is the paragraph?
```html
<style>
p { color: red; }
.intro { color: green; }
p { color: blue; }
</style>
<p class="intro">Bonjour</p>`- Green: the class outweighs the type
- Blue: the last rule written always wins
- Red: the first rule written has priority
- Blue: two p rules outweigh one class
Show the answer
Green: the class outweighs the type
The class (0, 1, 0) beats the type (0, 0, 1): order only matters at equal specificity, and here it only separates the two
prules from each other.With equal specificity, the declaration … wins, even if it comes from another file.
Show the answer
With equal specificity, the declaration written last wins, even if it comes from another file.
Order of appearance is the last criterion of the cascade: swapping two rules of equal weight swaps the result.
Inheritance: what is it?
Show the answer
The mechanism by which an element takes its parent's computed value for certain properties, when no rule sets it directly.
Text properties (colour, font, line spacing) are inherited, box properties (margin, border, background) are not: otherwise every child would redraw its parent's border.
You write
body { font-family: Georgia, serif; }. Paragraphs change font, but buttons and form fields keep the system one. What is the explanation?- font-family is not inherited, it must be repeated on every element concerned
- Form controls ignore all author CSS, only HTML can style them
- The browser's default sheet sets their font:
font: inheritonbutton, inputrestores it - A body can only pass its font down to text tags, never to others
Show the answer
The browser's default sheet sets their font:
font: inheritonbutton, inputrestores itfont-familyis indeed inherited, but a browser rule onbuttonandinputreplaces it for those elements: the inherited value is only used when no rule sets the property.