Why a Rule Wins
When two rules disagree, the browser picks a winner, and it always follows the same steps. Learn the cascade, score selectors by specificity, see what children inherit from their parents, and fix a style that won't change without reaching for !important.
Updated
The Cascade
- The Cascade: How the Browser Picks a Winner (Apprentice): When two CSS rules set the same property on the same element, the browser runs the same tie-breaker contest every time, and knowing its rounds tells you why a style won or lost.
- Specificity: Scoring a Selector (Apprentice): Specificity is the score the browser gives every selector, in three columns, and comparing two scores column by column tells you which rule wins before you refresh.
Inheritance
- Inheritance: What Children Get from Their Parents (Apprentice): Some properties, mostly text ones such as color and font, pass from an element to everything inside it, while box properties such as border and padding stay put, and a few keywords let you choose.
Exercise: Why Won't It Change?
- Exercise: Why Won't It Change? (Apprentice): Find out why five of a bike shop's styles lose, fix each one without !important, and write one line saying why it lost, until every test passes.