The inherit, initial, and unset values

Back to the index.

The inherit, initial, and unset keywords are special values you can give to any CSS property.

This keyword applies the value of the element’s parent, whether that makes sense or not. Some CSS properties, such as color or font-family, are automatically inherited, but others, such as display or margin, aren’t. The inherit keyword should work on all CSS properties, though.
This keyword applies the initial value as defined in the CSS specifications. Sometimes this initial value makes sense (float: none), sometimes it’s there for historical reasons (background-repeat: repeat), and sometimes the spec writers made an essentially random-though-somewhat-defensible choice (color: black).
This keyword applies the inherited value if the property is normally inherited (such as color), or the initial value if the property is normally not inherited (such as display).


Colors are normally inherited, so the lurid blue used on this page should apply to all elements. This page contains a few elements that have hard-coded colors — for instance the main navigation. Setting color: inherit forces these elements to blue as well.
The initial value of color is black. Thus, setting code: initial should force all elements to a black color.
Since colors are normally inherited, color: unset should force them all to inherit, and thus blue.
Display values are normally not inherited. Setting display: inherit makes all children of the body block-level elements, since the body has display: block.
The initial value of display is inline. Thus, setting display: initial should make all children of the body inline elements.
Since display values are normally not inherited, display: unset should force all elements to initial, and thus inline.


Anyway, play with these values. Select a property and a value and see what happens. Try to make a prediction of what should happen — and remember some browsers don’t support unset or initial.

body * {
	:  !important;