All CSS properties have 3 basic values in common: inherit, initial and unset. Inherit and initial have been around for a long time, but unset is a new addition. What the values will do can at times get confusing, so here’s a breakdown:
- inherit: Get the property from the parent element.
- initial: The default value for the property (the browser default).
- unset: Acts as either inherit or initial. It’ll act as inherit if the parent has a value that matches, or else it will act as initial.

This affiliate banner helps support the site 🙏
Here’s an example to make is clear. Here’s our markup:
<div class="wrapper">
<p class="one">Snake<p>
<p class="two">Lizard<p>
<p class="three">Alligator</p>
<p>Komodo Dragon</p>
</div>
And here’s our CSS:
.wrapper { color: orange; }
.wrapper p { color: purple; }
p.one { color: inherit; }
p.two { color: initial; }
p.three { color: unset; }
- Snake is orange, it inherits from the wrapper div.
- Lizard is black, it takes the initial browser default value.
- Alligator is orange, in this case unset acts as inherit because there is a parent with a matching value.
- Komodo Dragon is purple, the only paragraph that takes its value from the .wrapper p selector.
👉 A neat trick with unset is when combined with the all shorthand, which automatically affects all properties of a selector. The following unsets every properties of the selected p elements:
article p {
all: unset;
}