Why did your style not apply when you clearly wrote it? The answer is almost always the cascade and specificity — the rules that decide which CSS wins. Understanding this turns CSS from guesswork into control.
The cascade
When multiple rules target the same element, CSS resolves conflicts in order: importance, then specificity, then source order. If everything else ties, the rule written later wins. That is the "cascade" in Cascading Style Sheets.
Specificity
Specificity is a score for how specific a selector is. Roughly: inline styles beat ids, ids beat classes, classes beat type selectors. A more specific selector wins even if it is written earlier.
| Selector | Strength |
|---|---|
| style="..." (inline) | Strongest |
| #id | Strong |
| .class, :hover, [attr] | Medium |
| element (p, h1) | Weak |
| * (universal) | Weakest |
<p id="x" class="note">Which colour wins?</p>p { color: green; }
.note { color: blue; }
#x { color: red; }Inheritance
Some properties (like color and font-family) are inherited by children automatically; others (like margin and border) are not. You can force inheritance with the <code>inherit</code> keyword when needed.
Avoiding specificity wars
#main .list li a.link { color: red; }.link { color: red; }Escalating specificity (or using !important) to override styles. Each escalation makes the next override harder. Keep specificity flat and low.
Style with single classes wherever possible. Flat, low specificity keeps CSS predictable and easy to override — the foundation of scalable CSS you will meet at the advanced level.
Write three rules targeting one element (a type, a class and an id selector) with different colours. Predict which wins, then verify in the preview.
1. If specificity ties, which rule wins?
2. Which is most specific?
3. Which property is inherited by default?
- The cascade resolves conflicts by importance, specificity, then order.
- Specificity: inline > id > class > element > universal.
- Some properties inherit (color, font); box properties do not.
- Keep specificity low and flat to avoid override wars.