The following list of keyword values is ubiquitous to web designers and developers, but have you ever wondered what exactly they mean and do?
The auto
CSS keyword value tells the browser to automatically compute the CSS property's value, and it looks like this:
margin: auto;
The term auto is short for automatic. It's not the same as saying 100% because 100% is an actual defined value; auto
is calculated by the browser.
One of the most common locations to see the keyword auto
applied is when centering an element horizontally with the margin
CSS property.
CSS:
.element {
margin: auto;
}
The inherit
CSS keyword value makes an element derive/inherit the values of its parent container.
CSS:
/*All <h1>'s are red*/ h1 { color: red; } /*All text in .element is blue*/ .element { color: blue; } /*Make all <h1>'s inside .element blue*/ .element h1 { color: inherit; }
The initial
CSS keyword value sets the CSS property to its default value as per the CSS spec.
CSS:
/*All <h1>'s are red*/ h1 { color: red; } /*Set the color of all <h1>'s inside .element to the default (black)*/ .element h1 { color: initial; }
The unset
CSS keyword is the combination of the inherit
and initial
keywords, and it looks like this:
color: unset;
By combining the inherit
and initial
keywords, the unset
CSS keyword value resets the value of a property.
If an element is inheriting values from its parent container and the unset
keyword is declared, then the property's value is reset to the parent container's value (since it's inheriting). But if an element has no parent container and the unset
keyword is declared, then its property's value is reset to the default value as per the spec (since it's not inheriting).
CSS:
/*All <h1>'s are set to the default color per the spec*/ h1 { color: unset; } /*All <h1>'s are set to the default color of the parent*/ .element { color: green; } .element h1 { color: unset; }
The revert
CSS keyword value is like an undo in CSS as it returns the cascade to a previous state and resets the property to the default value defined by the user agent. It looks like this:
display: revert;
This is different from the initial
CSS keyword because revert
rolls back the cascade and resets the value as per the user agent's style sheet value. With initial
the value is reset to its default value as per the specification.
For example, the spec says that the default value of display
is inline
. However, most UAs assign a default value of display: block;
to <div>
, or display: table;
to <table>
.
CSS:
/*Default value per the spec*/ display: inline; /*Default value per the UA style sheet*/ div { display: block; } /*Style defined by the developer/designer*/ .element { display: inline-block; } /*Style sheet is rolled back and DIV behaves as display: block;*/ div.element { display: revert; }
3.16.79.65