Resolving conflicts
When several rules target one element, the cascade picks a winner in order.
- Origin and importance: author important beats author normal beats user agent defaults.
- Specificity: an id outranks a class, which outranks a type selector. Inline styles outrank selectors.
- Source order: among equal specificity, the last rule written wins.
Specificity is counted as a tuple of inline, ids, classes, and types. A single id beats any number of classes, so chasing specificity wars by stacking classes rarely helps.
Inheritance
Inheritance is separate from the cascade. Some properties pass from parent to child automatically.
- Inherited by default: color, font family, font size, line height, visibility.
- Not inherited: margin, padding, border, background, width.
You can force either behavior with the keywords inherit, initial, and unset. The modern revert keyword rolls a property back to what the previous origin would have set.
Key idea
The cascade picks a winner by origin then specificity then source order, while inheritance separately passes text properties down unless you override with inherit or initial.