Phase 2Beginner3 of 12 in CSS

The Cascade, Specificity and Inheritance

Why one CSS rule beats another: origins, !important, cascade layers, specificity scores, source order and inheritance, step by step.

Sooner or later every CSS learner writes a rule, saves, and nothing changes. The rule isn't broken: another rule is winning. This phase teaches the exact algorithm the browser uses to pick the winner when several rules set the same property on the same element. That algorithm is called the cascade, and it is the C in CSS.

You'll learn the cascade's steps in order (origin and importance, cascade layers, specificity, order of appearance), how to score any selector's specificity by hand, how values flow from parents to children through inheritance, what !important really does and why it causes trouble, and how modern cascade layers (@layer) let you control the whole thing on purpose.

After this phase, "my CSS doesn't work" becomes a question you can answer in a minute with DevTools. It builds on Phase 1 (Selectors) and everything later (layout, components, architecture in Phase 11) depends on it.

0/5 · 0%

5 topics ~2 h 15 code blocks & diagrams

Start with the first topic

2.1

The Cascade

When several declarations try to set the same property on the same element, the cascade picks exactly one winner by comparing, in order: origin and importance, inline style, cascade layer, specificity, and order of appearance.

22 min 1 diagram 2 code practice

2.2

Specificity in Depth

Specificity is a three-number score (IDs, classes, types) the browser gives every selector; when origin, importance and layer tie, the higher score wins, compared column by column from the left.

22 min 1 diagram 2 code practice

2.3

Inheritance

Some properties, mostly about text such as color and font, pass from a parent element to its children automatically; the rest do not. The keywords inherit, initial, unset and revert let you control this on purpose.

22 min 3 code practice

2.4

!important and How to Avoid Needing It

Adding !important to a declaration moves it into a stronger group of the cascade, above every normal declaration whatever its specificity; it is a last resort that fixes today's bug and makes tomorrow's harder.

20 min 3 code practice

2.5

Cascade Layers

Cascade layers (@layer) group rules into named layers whose order you declare up front; a later layer beats an earlier one before specificity is even compared, so resets, frameworks and your own code stop fighting.

22 min 3 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

Make the losing rule win

The warning should be red, but it shows gray. Find out why, then make the text red.

Beginner

Style all the text with one rule

Using inheritance, give the whole page dark gray text #333 and the font Georgia, serif by writing them once, on body.

Beginner

Bring back the bullets with revert

A reset removes bullets, padding and margins from every list, which is right for the menu. The shopping list (.plain) should look like a normal list again.

Beginner