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:
- 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
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 value tells the browser to use the CSS property's initial value.
<p class="child">This text will be black.</p>
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.
initial keyword tells the browser to use the CSS default value of the given property. For example:
initialvalue will always be
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
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 another
font-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.
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
Why Use Unset if it Works Exactly the Same as Inherit and Initial?
If unset acts like
inherit, why would we want to use
If we’re resetting only one property, then
unset is unnecessary: we can just use the
initial values instead.