Some properties inherit; others do not
Inheritance matters when an element has no winning declaration for a property. Inherited properties take the computed value of their parent. Text colour and font family commonly inherit, which is why setting colour on a section usually colours its text. Other properties, including border and margin, normally use their initial values instead; a card’s border does not automatically wrap every child.
Check a property’s “Inherited” entry in its reference rather than assuming from its appearance. A direct declaration on a child wins for that child in ordinary cases: inheritance only supplies a value when the cascade has not supplied one there.
Control inheritance explicitly
inherit asks for the parent’s computed value even for a property that does not normally inherit. initial asks for the property’s specification-defined initial value, which is not always the browser’s default styling for an HTML element. unset acts like inherit for naturally inherited properties and like initial for other properties. revert rolls the cascade back to a previous origin, often revealing user or browser styles; it is not simply another spelling of initial.
These keywords work on many properties. Use them deliberately and check the resulting computed style. A broad all: unset reset can also remove useful browser defaults, so a focused property change is easier to reason about.
| Keyword | What it requests |
|---|---|
| inherit | Use the parent’s computed value. |
| initial | Use the property’s specified initial value. |
| unset | Inherit if the property normally inherits; otherwise use initial. |
| revert | Roll back author styling to an earlier cascade origin. |
Make a nested link follow its parent colour
Suppose an announcement banner has white text and a link should match it. Browsers normally style links separately, so an explicit colour on the link avoids depending on its default link colour. Setting color: inherit on the banner link takes the banner’s computed colour. The banner’s border does not appear around the link because border does not naturally inherit.
Try changing .notice to dark blue: the link changes with it. This is useful in themed components, where the parent owns the text colour but the link still keeps its underline for recognition.
HTML
<aside class="notice">Read the <a href="/guide">study guide</a>.</aside>CSS
.notice { color: white; background: #17418a; padding: 1rem; border: 2px solid #0b2d68; }
.notice a { color: inherit; text-decoration: underline; }Avoid common reset mistakes
Do not expect padding, border or background to inherit just because colour does. Do not use initial when you mean “the usual browser appearance”: for example, the initial display value is not the same as the browser’s default display for every HTML element. If a reset produces an unexpected result, inspect the element’s computed style and work backwards to the declaration that set it.
Syntax
color: inherit;
border-color: initial;
font-size: unset;Examples
A link that follows its banner colour
Apply this CSS to a .notice banner containing a link.
.notice { color: white; background: #17418a; padding: 1rem; border: 2px solid #0b2d68; }
.notice a { color: inherit; text-decoration: underline; }- The notice sets its own text colour, background, padding and border.
- color: inherit makes the link use the computed colour of its parent notice.
- The border remains on the notice only; it is not an inherited property. The underline keeps the link distinguishable.
HTML used by this example
<aside class="notice">Read the <a href="#guide">study guide</a>.</aside>Best practices
- Check whether a property inherits before relying on a parent rule.
- Prefer a focused property override over a broad reset.
- Inspect computed values when inheritance behaves differently from what you expected.
Runtime & versions
Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.
CSS specifications (modules)