// Tutorial //

Inherit, Initial and Unset Values for CSS Properties

Published on December 10, 2016
Default avatar
By Alligator.io
Developer and author at DigitalOcean.
Inherit, Initial and Unset Values for CSS Properties

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

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.

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;
}

Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?

I always see these values in editor’s auto-suggestion but never understood what they meant and also I never had to use them. But this is enlightening to know that they have a meaningful function. 👏🏻