Initial, Inherit and Unset values in CSS

In order to understand what these three keywords do we need to first understand where our basic styles come from:

  • Initial values: Every CSS property has an initial value. For example: line-height: normal
  • User agent styles: Each browser applies its own basic styles to HTML elements. For example: font-size, font-weight and margins are applied to h1's by default

Inherit

The current element will inherit the value from its parent element. If the parent element also has an inherit value, the browser will continue up the DOM until it finds one. If none is found, the browser will resort to the user agent styles and will default to initial values if there are no user agent styles.

Initial

Using the initial value tells the browser to use the CSS property's initial value.

<div class="parent">
	<p class="child">This text will be black.</p>
</div>
.parent {
	color: red;
}

.child {
	color: initial;
}

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.

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.

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.

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…
MediumElad Shechter

Like this post? Got a question?

Reply via: Email, Bluesky, Mastodon, Twitter