Most CSS values belong to one property only: flex only makes sense for display, bold only for font-weight. Four keywords escape that rule and work on any property at all, from color to grid-template-columns. They do not describe a value, they describe a way of picking one.
Mixing them up is easy since three of them look alike on paper. The only real way to tell them apart is to look at a case where the answer changes depending on which keyword is chosen.
Definition
CSS-wide keywords, also called universal keywords, are inherit, initial, unset and revert. Each one tells the browser where to fetch a value instead of writing one explicitly.
| Keyword | Value picked |
|---|---|
inherit | The parent's already computed value |
initial | The default defined by the CSS specification |
revert | The browser's own default for that element (its built-in stylesheet) |
unset | inherit if the property CSS inheritance, otherwise initial |
An example where all four differ
display is a good property to see the difference, because it never inherits and the browser gives certain tags, like li, a default that differs from the specification's generic default.
ul {
display: flex; /* custom rule on the parent */
}
li {
display: inherit;
}
/* -> flex, copies the parent */
li {
display: initial;
}
/* -> inline, the generic CSS default */
li {
display: unset;
}
/* -> inline too, display never inherits */
li {
display: revert;
}
/* -> list-item, the browser's default for li */The four lines obviously cannot coexist on the same selector: comparing them one at a time is what shows each keyword fetches its answer from a different place.
unset, the safest default choice
For a property that inherits, like color, unset behaves like inherit. For a property that does not, like margin or border, it behaves like initial. That adaptive behaviour is what makes it the most convenient keyword for cancelling a rule without knowing by heart whether the targeted property inherits or not.
revert is the only one of the four that looks at the browser's own stylesheet rather than the CSS specification. It exists specifically to undo a CSS reset and normalize on one particular element, giving it back its native look, a button that becomes a real button again for instance.A typical use case
A component using all: unset; starts from an almost blank slate on every property at once, handy for neutralising the style a browser imposes on a button before restyling it entirely by hand. Using all: revert; instead would do the opposite: it would restore the button's native look rather than emptying it.
Frequently asked questions
unset and initial?initial always fetches the generic default from the CSS specification, without ever checking whether the property inherits. unset checks first whether the property inherits: if it does, it behaves like inherit, otherwise like initial. The two only differ on inherited properties.
revert and unset look similar, why pick one over the other?unset targets the defaults defined by the CSS specification itself. revert targets the browser's own defaults, the ones it natively applies to each tag. On a button, revert restores its native look, while unset strips it of any inherited or default styling.
font or margin?Yes, and that is where they are most useful: applied to a shorthand, they reset every detailed property it bundles in one go, without needing to list them one by one, which also avoids forgetting one along the way.