The Cascade · stage 05
Inheritance
Some properties pass down the tree and some do not, and the list is arbitrary history.
Stage 05 of six/The Cascade, piece 2 of 3/Short piece/Next: Who designed it
inherit — forces the property to take its parent's computed valueWhy some rules travel and some stay put
Set font-family on the body element and it flows to every paragraph, span and link inside it. Set border on that same element and nothing of the sort happens — each child starts with no border, regardless of what its parent declares. This is CSS inheritance, and the division between what propagates and what does not is not the product of a clean principle. It is history.
The logic, such as it is, runs like this: properties that affect the appearance of text were designed to be inherited because authors almost never want to re-declare the typeface or line height on every single element. Håkon Wium Lie and Bert Bos, who shaped CSS at the W3C, encoded that assumption directly into the spec. Properties that affect box geometry — margin, padding, border, width — were not inherited because a parent's box dimensions genuinely should not impose themselves on its children. So far, so reasonable. But the boundary is not perfectly principled: visibility inherits and display does not, even though both feel like layout. cursor inherits; background does not, though a child sitting over a parent's background looks as if it does.
The cascade defines four keyword values that let authors override the default behaviour on any property: inherit forces inheritance; initial resets to the property's specification default; unset behaves like inherit for naturally inherited properties and like initial for everything else; revert rolls back to the browser's own stylesheet. These are not workarounds — they are how you reach into the inheritance model and steer it deliberately.
One subtlety catches people out: inheritance travels the document tree, not the visual stacking order. An absolutely positioned element is a descendant of wherever it sits in the markup, not of whatever it appears to float above on screen. It inherits from its DOM parent, full stop. Similarly, a pseudo-element like ::before inherits from its originating element, because the originating element is its parent in the tree as the browser constructs it.
The practical upshot is that you need to know the inherited status of a property before you can predict where your declaration will land. The CSS specification published by the W3C marks every property as "inherited: yes" or "inherited: no" in its definition table — a lookup worth keeping open.
cursor inherits; background does not, though a child sitting over a parent's background looks as if it does.
Set font-family on the body element and it flows to every paragraph, span and link inside it.