inherit, initial, unset, revert
Keywords that work in any property and reset it in different ways.
Syntax
property: inherit | initial | unset | revert;Parameters
| Parameter | Type | Description |
|---|---|---|
| inherit | keyword | Take the value from the parent. |
| initial | keyword | The initial value from the CSS specification (for `color` — black). |
| unset | keyword | `inherit` for inherited properties, `initial` for the rest. |
| revert | keyword | Back to the browser's default style for this element. |
Examples
A link with the color of its parent:
<style>
.card { color: darkgreen; border: 2px solid currentColor; padding: 8px; }
.card a { color: inherit; }
</style>
<div class="card">The link takes the card color: <a href="#">Read more</a></div>initial and revert differ:
<style>
li { list-style: square; color: crimson; }
.a { color: initial; }
.b { list-style: revert; }
</style>
<ul>
<li class="a">initial: black, the CSS default</li>
<li class="b">revert: the browser's own bullet style</li>
</ul>Notes
initial often surprises: for display it is inline, even on a div. To go back to "how the browser shows it", use revert. There is also revert-layer — it cancels the styles of the current cascade layer.
See also
- !important — Makes a declaration win over all ordinary declarations, regardless of specificity.
- @layer — Groups styles into cascade layers: a later layer wins regardless of specificity.
- font — A shorthand that sets the style, weight, size, line height and family of the font in one line.
In the tutorial
- Global values — The inherit, initial, unset and revert keywords that every CSS property accepts, and the all property that resets every style at once.