Cascade FallsISSUE #8 of 33

inheritance · what flows down

StylaVSThe Specificity Sphinx

Styla saysSome properties inherit from parent to child (color, font); most (margin, border) do not.

Set color or font-family on body and children inherit it — that's why you style typography high up. Box properties like margin, padding, and border don't inherit. You can force it with inherit, or reset with initial/unset.

Power-ups you unlock

Text properties (color, font) inherit by default
Box properties (margin, border) do not inherit
Set typography on body to cascade it down
inherit / initial / unset control inheritance explicitly

The Specificity Sphinx attacks — common mistakes

Repeating font rules on every element instead of on body
Expecting margin/padding to inherit
Confusing inherit (parent value) with initial (default value)

Boss battleSet color and font-family on body, confirm a nested paragraph inherits both without its own rule.

Example code

<!doctype html><html><head><meta charset="utf-8">
<style>body{color:#8aff9d;font-family:monospace}</style></head><body style="background:#06040d;padding:20px"><div><p>I inherited color and font from body.</p></div></body></html>

▶ Open the interactive comic issue

‹ Specificity · Who Wins The Cascade Comments · Documenting Styles ›