Inheritance & Default Values
Some CSS properties flow down from parents to their children automatically — set a font on body, and everything inside uses it. Others don't. Knowing which properties inherit, and how to control it with keywords like inherit and initial, saves you writing the same declarations over and over.
Inherited properties
Text-related properties inherit; box-related properties don't. That's usually exactly what you want — imagine every paragraph and span getting its own copy of a container's border.
| Usually inherited | Not inherited |
|---|---|
color | margin, padding, border |
font-family, font-size, font-weight, font-style | width, height |
line-height, letter-spacing, text-align | background |
visibility, cursor, list-style | display, position |
direction, custom properties (variables) | box-shadow, opacity, transform |
Setting site-wide defaults
body {
font-family: system-ui, sans-serif;
font-size: 1rem;
line-height: 1.6;
color: #10131c;
}
Because so much inherits, a few declarations on body (or :root) style most of a page's text. Individual components then only override what's different.
Form controls don't inherit fonts
Browsers give buttons, inputs and textareas their own font by default. Most CSS resets include font: inherit for form controls so they match the surrounding text.
Controlling inheritance with keywords
| Keyword | Sets the property to… |
|---|---|
inherit | The parent's value — even for non-inherited properties |
initial | The property's default from the CSS specification |
unset | inherit for inherited properties, initial for others |
revert | The browser's default style for this element (e.g. bold for <strong>) |
revert-layer | The value from the previous cascade layer |
These keywords work on every property. all: unset resets every property at once — useful for stripping a button's default look before restyling it.
currentColor
currentColor means "whatever color is here". Borders, shadows and SVG fills can follow the text colour, so changing one value (like on hover) updates them all.
Inherited values are computed values
Children inherit the parent's computed value. For example, with font-size: 2em on a parent, children inherit the resulting pixel size, not "2em" — so nested em sizes compound. That's one reason rem (relative to the root) is often preferred (lesson 09). Unitless line-height values like 1.6, by contrast, are inherited as a ratio and recalculated for each element's font size, which is why they're recommended.