JavaScript Curriculum
Specificity and the Cascade
mediumA developer added a button style last month. Now you're trying to override it but nothing works. This is a cascade problem — and once you understand specificity scoring, you'll never be stuck again.
Specificity and the Cascade
When two CSS rules target the same element and set the same property, the browser has to pick one. It uses the cascade — an algorithm with four factors: origin, specificity, source order, and inheritance. Understanding it turns CSS debugging from frustration into logic.
Specificity — Selector Weight
Every selector has a score. Higher score wins. The score is expressed as three numbers: (a, b, c):
Click any quick-pick selector to paste it into Selector A, then click again for B.
The Cascade — Priority Order
Beyond specificity, the cascade has a layer order that determines which rules even compete:
Every browser ships a default stylesheet (user-agent styles). h1 is big, links are blue, margins exist. These are overridden by everything else.
/* browser default (simplified) */
h1 { font-size: 2em; font-weight: bold; }
a { color: blue; text-decoration: underline; }
p { margin: 1em 0; }Inheritance — What Passes Down the DOM
Not all CSS properties inherit from parent to child. Knowing which ones do saves repetitive declarations:
Click any property to learn whether it inherits and why.
Typography properties (color, font-*) almost always inherit. Box model properties (margin, padding, border) never do.
Your Challenge
Debug a specificity conflict and refactor a stylesheet that abuses !important into clean, predictable rules.
Challenge
Given three competing rules for a .card p element — one element rule, one class rule, one ID rule — predict which wins. Then refactor a style sheet that relies on !important by lowering specificity instead.
Specificity and the Cascade
mediumA developer added a button style last month. Now you're trying to override it but nothing works. This is a cascade problem — and once you understand specificity scoring, you'll never be stuck again.
Specificity and the Cascade
When two CSS rules target the same element and set the same property, the browser has to pick one. It uses the cascade — an algorithm with four factors: origin, specificity, source order, and inheritance. Understanding it turns CSS debugging from frustration into logic.
Specificity — Selector Weight
Every selector has a score. Higher score wins. The score is expressed as three numbers: (a, b, c):
Click any quick-pick selector to paste it into Selector A, then click again for B.
The Cascade — Priority Order
Beyond specificity, the cascade has a layer order that determines which rules even compete:
Every browser ships a default stylesheet (user-agent styles). h1 is big, links are blue, margins exist. These are overridden by everything else.
/* browser default (simplified) */
h1 { font-size: 2em; font-weight: bold; }
a { color: blue; text-decoration: underline; }
p { margin: 1em 0; }Inheritance — What Passes Down the DOM
Not all CSS properties inherit from parent to child. Knowing which ones do saves repetitive declarations:
Click any property to learn whether it inherits and why.
Typography properties (color, font-*) almost always inherit. Box model properties (margin, padding, border) never do.
Your Challenge
Debug a specificity conflict and refactor a stylesheet that abuses !important into clean, predictable rules.
Challenge
Given three competing rules for a .card p element — one element rule, one class rule, one ID rule — predict which wins. Then refactor a style sheet that relies on !important by lowering specificity instead.