The cascade and specificity

When rules collide

The single most common CSS frustration — "my rule is right there and the browser is ignoring it" — is never random. A fixed algorithm, the cascade, decides every conflict, and once you know it you can predict the winner instead of guessing.

In the lesson 4-1 sandbox, two rules targeted the same paragraph:

p { color: gray; }
.warning { color: red; }

<p class="warning">Careful!</p>

The text came out red. The cascade decides every such conflict, checking in order:

1. Importance: declarations marked !important beat everything. Use it almost never, because it makes CSS unfixable.
2. Specificity: more specific selectors beat less specific ones. .warning is more specific than p, so red wins.
3. Source order: still tied? The rule written last wins.

Separately, some properties (like color and font-family) inherit from parent to child when nothing targets the child directly. That is why setting fonts on body in lesson 4-2 styled the whole page.

The specificity score

Count a selector's parts into three buckets, and compare bucket by bucket:

Compare left to right like version numbers: (1,0,0) beats (0,9,9), because one ID outranks any number of classes. Inline styles (a style="..." attribute in the HTML) sit above all selectors.

Practical advice that will save you hours: style with classes almost everywhere. Flat class selectors keep every score at (0,1,0), so the winner is simply whichever rule comes last in the file. The cascade becomes boring, and boring is what you want.