CSS Child / The Cascade

Inheritance means some things travel downwards on their own.

Certain qualities pass from a container to everything inside it, and knowing which saves enormous repetition.

Some aspects of appearance flow down through the structure of the page without being asked to. Set a typeface or a text colour on a container, and everything inside inherits it, and everything inside those things inherits it in turn, all the way down, until something interrupts by stating a different value. Other aspects do not behave this way at all. Spacing, borders and backgrounds stay exactly where you put them and are not passed on. There is a rough logic to the split: the qualities that travel are the ones you would nearly always want consistent throughout a region, and the ones that stay are the ones that would be absurd if repeated at every level.

This is the difference between styling a page once and styling it several hundred times. If you understand inheritance, you make your broad typographic decisions in one place, near the top of the structure, and the entire page picks them up. Exceptions are then genuinely exceptional: small, few, easy to find, easy to justify. If you do not understand it, you end up setting the same typeface on every individual piece of text, and when you want to change it you must find every one of them, and you will miss some, and the page will develop a quiet inconsistency you cannot locate.

Inheritance also explains a category of surprise. A colour you set high in the structure appears somewhere you did not expect, because it was inherited by a descendant you had forgotten was inside that container. This is not a fault, it is the feature working, and the fix is not to fight it everywhere but to be more deliberate about where you set inheritable qualities in the first place. Ask yourself, each time: do I want this to be true of everything inside here? If yes, set it high. If not, set it exactly where it belongs.