Lesson 49 +10 XP

The Cascade

The Cascade

The "C" of CSS. When many rules target the same spot, this decides the winner.

The three layers of the algorithm

Origin & importance, !important, inline vs external vs user.
Specificity, id/class/element weights.
Order, later in the file wins (when equal).

Specificity quick math

Selector type	Points
id (#x)	100
class .x / attribute [:x] / pseudo :x	10
element p / pseudo ::x	1

Highest total wins.

The !important keyword

!important upgrades a declaration and jumps it above other specificity. Use sparingly!

p {
  color: red !important;
}

Order matters

p { color: blue; }
p { color: green; }   /* this wins at equal specificity */

Inheritance

Some styles pass to children (color, font), others don't (margin, border). Override with:

inherit, initial, unset, revert.

TL;DR

Cascade = origin+importance → specificity → order.
ID(100)>Class(10)>Element(1).
Equal = later wins.
!important overrides (use sparingly).
Some properties inherit; control with keywords.