Inheritance, and the four keywords nobody types

Some properties inherit: color, font-family, line-height, visibility, cursor, text-align. Set them once high up and every descendant that does not override them picks them up. Some do not: border, padding, background, display, width. Set those and only that element has them.

There is no rule in the syntax that tells you which is which, it is decided per property by the specification, on the basis of whether inheriting would usually be helpful. Text properties inherit because a paragraph inside a section should look like the section. Box properties do not, because a border on a container should be one border, not a border on everything inside it.

visibility is the one worth memorising because it breaks people’s mental model: it inherits, so hiding a parent hides the children, and a child can set visibility: visible and reappear inside a hidden parent. display: none cannot be undone that way, because the element is simply not in the render tree, and now you know why, from the pipeline chapter.

Then the four keywords. inherit takes the parent’s computed value, and it works on properties that do not normally inherit, which is the only reason it exists, border-color: inherit is a useful thing that nothing else gives you. initial is the value in the specification before any stylesheet including the browser’s, and it is almost never what people want: the initial value of display is inline, not block, so display: initial on a div does something surprising.

unset is the chameleon: it behaves as inherit for inherited properties and initial for the rest. One keyword, two behaviours, decided by the property rather than by you. The instrument below is the fastest way to internalise this, apply unset to a node with color selected, then switch to padding without changing anything else, and watch the same keyword do a different thing.

revert is the one that is actually most useful day to day and the one nobody reaches for. It goes back to the browser’s own stylesheet rather than to nothing. On a heading, revert restores the bold and the size. On a link, the blue and the underline. When you want to undo your own styling of a native element and get the browser’s behaviour back, revert is the answer and initial is the thing that leaves you with an unstyled inline mess wondering what went wrong.