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
colorproperty’sinitialvalue will always beblack
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-sizeon the HTML element, it will apply to all HTML elements until you set anotherfont-sizeon 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
borderon 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.
Elad Shechter