In CSS, what is the difference between the global keywords inherit, initial, unset, and revert?

## One vocabulary, every property Every CSS property accepts these keywords, no matter what its normal value grammar is. They are handled by the cascade itself, so `border: inherit` and `z-index: revert` are valid even though neither keyword appears in those properties' value definitions. Each must be the sole value of the declaration — `margin: 10px initial` is invalid and the whole declaration is dropped. ## inherit Takes the **computed value of the parent element** for that property, unconditionally. The property's inherited/not-inherited flag only decides what happens when no declaration reaches the element; an explicit `inherit` is a declaration and simply wins. So `inherit` is how you make a normally non-inheriting property inherit: ```css .child { border-color: inherit; padding: inherit; } ``` On the root element, where there is no parent, `inherit` falls back to the initial value. ## initial Applies the property's **initial value as written in the specification**. The trap is that this is not "how the browser normally renders this element" — the browser's look comes from the user-agent stylesheet, which is a set of ordinary declarations layered on top of the initial values. The canonical demonstration is `display`. Its initial value is `inline`; a `<div>` looks like a block only because the UA stylesheet says `div { display: block; }`. So: ```css div { display: initial; } /* the div becomes inline */ ``` Similarly `initial` on a text property does not give you the site's font — it gives you the spec's initial value, which is the UA's default font. ## unset A convenience keyword meaning "erase this declaration's effect and let normal defaulting happen". For an inherited property it acts as `inherit`; for a non-inherited property it acts as `initial`. It is the keyword you want when undoing something in a component override, because it restores the natural behaviour rather than a hard-coded value. Note it still erases **all** author declarations, including the ones your own framework relies on — the element gets the parent's value or the spec initial, not whatever your base stylesheet had set. ## revert Rolls the property back to the value it would have if the current cascade origin had contributed nothing. In an author stylesheet — the origin you normally write in — that means the value from the user origin, or failing that the user-agent stylesheet. This is why `revert` is usually the friendlier reset. `button { all: initial; }` produces something that is inline, unstyled, and no longer looks or behaves like a control to sighted users; `button { all: revert; }` gives you back the browser's own button. Likewise `div { display: revert; }` restores `block`, while `display: initial` gives `inline`. ## revert-layer A fifth keyword, rolling back only as far as the **previous cascade layer** within the same origin rather than out of the origin entirely; used outside any layer it behaves like `revert`. It shipped in Chrome 99, Firefox 97 and Safari 15.4 (2022) and is broadly available now, whereas `inherit`, `initial` and `unset` have been safe for a decade and `revert` since roughly 2020 in Chromium and 2016 in Safari. ## Putting them side by side Take a `<div>` with the author rule `div { display: flex; }` and ask what each keyword yields when it overrides it: ```css div { display: inherit; } /* the parent's computed display */ div { display: initial; } /* inline — the spec initial value */ div { display: unset; } /* inline — display is not inherited */ div { display: revert; } /* block — the UA stylesheet value */ ``` Four keywords, four different outcomes on one property, which is exactly why interviewers like this question. ## Choosing one Use `inherit` to deliberately pull a value down from an ancestor. Use `unset` to neutralise a declaration and let defaulting decide. Use `revert` when you want the browser's native presentation back, especially on form controls and replaced elements. Reach for `initial` only when you genuinely want the specification's blank value and have checked what that value actually is.