Understanding the “Initial”, “Inherit” and “Unset” CSS Keywords

CSS has default keywords for various values. In this article I’m going to talk about three of them: initial , inherit , and the relatively new one, unset .

There’s a good chance that although most web developers have encountered them, many of even the most experienced ones don’t fully understand them.

For a long time, the only thing I knew about these keywords was that they’re used for resetting styles in CSS. But if all of those keywords are a kind of reset, then why are there so many? What exactly are the differences between them? I decided to explore these three keywords deeply, to fully understand, once and for all, the differences between these three common keywords values.

The Basic Styles of the Web

Before we start to understand the CSS keywords, it’s important to understand from where we get our basic styles in our browser.

The Initial Value of Every Property in CSS

Every property of CSS has an initial value. This initial value has no connection to the type of HTML element it’s applied to.

An example from MDN of the initial value:

The User-Agent Browser Styles

After applying the initial styles of all the CSS properties, the browser loads its styles. These styles have nothing to do with the base initial values of the CSS properties.

An example of user-agent style:

HTML elements do not have initial style values! The basic styles of an HTML element, such as the <h1> tag for example, comes from the browser user agent stylesheet, and not from the initial value of the properties of CSS.

Now let’s start talking about the CSS keywords!

The Inherit Keyword

The keyword value of inherit tells the browser to search for the closest parent element’s value and let the current element inherit that value. If the closest parent has an inherit value too, the browser will continue going up the DOM until it finds some value. If there isn’t any value, the browser will use its user-agent style, and if there isn’t any user-agent style, it will use the initial base style.

CSS Initial Keyword

To understand the initial keyword, we have to remember an important fact: Every property in CSS has a default value, which has nothing to do with the user agent's default value. User-agent styles are the basic styles that the browser applies to HTML elements in the browser. We tend to think that they come automatically with the HTML, but they don't.

The initial keyword tells the browser to use the CSS default value of the given property. For example:

• The color property’s initial value will always be black

This behavior can be very confusing because, as we said before, the default value of a CSS property isn’t necessarily the default value that the browser defines for an element. For example, the initial value of the display property is inline , for all elements. Therefor if a <div> element gets an initial value on its display property, its display will be inline , and not block , which is its user-agent style.

Example:

div.box{ 
    background-color: red; 
    display: initial; /* will be equal to inline and not to block */
}

An example on CodePen of the Initial on div element’s display property

The Unset Keyword

The unset keyword is unique in that it works differently on different types of properties. In CSS, there are two types of properties:

• Inherited properties — properties that affect their children. All the properties which affect text have this natural behavior . For example, if we define a font-size on the HTML element, it will apply to all HTML elements until you set another font-size on an inner HTML element style.

• Non-inherited properties — All the other natural properties, which affect only the element which they define. These are all of the properties that don’t apply to text . For example, if you put a border on a parent element, its child will not get a border.

The unset value works the same as inherit for inherited properties types. For example, for the text color property, it will work like inherit value, that is, look for a parent element with a definition to the property, and if none is found — use the user-agent value, and if there isn’t any user-agent style, it will use the initial base style.

For non-inherited properties, the unset will work the same as the initial value, that is, apply the CSS default value; for example, for border-color , it will work as initial .

.some-class{ 
   color: unset; /* will be equal to 'inherit' value */ 
   display: unset; /* will be equal to 'initial' value*/
}

Why Use Unset if it Works Exactly the Same as Inherit and Initial?

If unset acts like initial and inherit , why would we want to use unset ?

If we’re resetting only one property, then unset is unnecessary: we can just use the inherit or initial values instead.

But nowadays we have a new property called all which brings with it a new capability: to reset both all of the inherited properties and the non-inherited properties at once!

In this new way, you don’t need to reset properties one by one. Thus, Applying the unset value to the all property will reset all the inherited properties to inherit and all of the non-inherited properties to initial.

This is the only reason for the existence of the new unset keyword value! Otherwise, we could use the inherit and initial values instead.

Instead of resetting properties one by one, for example:

/* Bad */
.common-content *{ 
    font-size: inherit; 
    font-weight: inherit;border-width: initial; 
    background-color: initial;
}

We can use the new all property with the unset value, which will affect all the existing properties, for example:

/* Good */
.common-content *{ 
    all: unset;
}

I wrote a small example to demonstrate how properties behave when using the all property with the unset value: some act as if the inherit value was applied, and some — as if the initial value was applied. A CodePen Example of all: unset; .

The Revert Keyword

But what if we want to reset the property’s styles to its original user agent style and not to the property’s base style? For example, to revert the display property of a <div> element to block (its user agent style) and not inline (its CSS base style)?

For that, we will soon get a new CSS keyword: revert . The revert keyword is very similar to unset , the only difference being that it prefers the user-agent’s styles to the CSS property’s basic style. For Example:

div{
    display: revert; /* = block */ 
}h1{ 
    font-weight: revert; /* = bold */ 
    font-size: revert; /* = 2em */
}

This way if we want to reset all styles of an HTML tag to the browser’s base style, we can do it like this:

/* Good */
.common-content *{ 
    all: revert;
}

Thus the revert gives us even more powerful possibilities than the unset keyword. But for now, the revert keyword works only in Firefox and in Safari.

Browser Support

• inherit — works in all browsers, including Internet Explorer 11
• initial & unset — work in all browsers except for Internet Explorer 11
• revert — works only in Firefox & Safari, for now.

Final Words

That’s all.

I hope you’ve enjoyed this article and learned from my experience.

If you like this post, I would appreciate applause and sharing :-)

You can follow me via Twitter .

- Understanding the Difference Between CSS Resolution and Device Resolution

Who Am I?

I am Elad Shechter, a Web Developer specializing in CSS & HTML design and architecture. I work at Investing.com .