The inherit, initial, revert, and unset values

Back to the index.

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

inherit
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.
initial
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).
unset
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).
revert
This keyword applies the inherited value if the property is normally inherited (such as color), or the value defined in the browser style sheet if the property is normally not inherited (such as display).

Tests

This page has a few extra styles for testing purposes:





	

	
Colors inherit, 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 code elements, which are ugly green. 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 inherit, color: unset should force them all to inherit, and thus blue.

	

	
Since colors inherit, color: revert should force them all to inherit, and thus blue. The buttons (and the select boxes below) remain stubbornly black, though, apparently honouring the browser style sheet, which contains
	button {color: black}. I do not understand this behaviour, so I’m going to say form elements are weird.

	

	
Display values do not inherit. 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 do not inherit, display: unset should force all elements to initial, and thus inline.

	

	
Since display values do not inherit, display: revert should force all elements to the values defined in the browser style sheet. Thus, the page will look normal, except that we lose the display: grid on this list, since a dl’s 
	browser style is display: block.








Playground



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;
}