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

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.

Line-height’s inital value is “nornal”

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.

h1 element styles from the chrome browser user agent

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 color property’s initial value will always be black
div.box{ 
background-color: red;
display: initial; /* will be equal to inline and not to block */
}
display initial value — info in MDN

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.
font-size inherit property — taken from MDN
  • 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.
border un-inherit property — taken from MDN
.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?

/* Bad */
.common-content *{
font-size: inherit;
font-weight: inherit;
border-width: initial;
background-color: initial;
}
/* Good */
.common-content *{
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)?

HTML div tag’s user agent’s base style
div{
display: revert; /* = block */
}
h1{
font-weight: revert; /* = bold */
font-size: revert; /* = 2em */
}
/* Good */
.common-content *{
all: revert;
}

Browser Support

  • inherit — works in all browsers, including Internet Explorer 11
  • initial & unset & revert— work in all browsers except for Internet Explorer 11

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 :-)

Video Talk on This Subject:

I did a lightning talk on this subject, you can watch the full YouTube video:

My talk: “The CSS Keywords That No One Really Understands

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store