You know those nights when you race towards a deadline, banging out the CSS as fast as you can, there comes a moment when you pause…wondering what keyword would get rid of that z-index on that anchor, then you make the best guess you can, and type:

z-index: none;

Then go on in life, as it “renders” like you wanted it, it works, no big deal.

But it is. Specifying incorrect values might inject behaviour that you did not expect. It is quite possible that the currently incorrect value might be, in the future, used for a valid value which would distort the design you so carefully did (and how often do we revisit a client’s website to update? :).

Initial Values

The spec defines a value that will be the initial value for a property when it is not declared in any stylesheets - either the user agent stylesheet (look at iecss.com for stylesheets of IE, Opera, Firefox, Webkit) or the ones you write.

Now, user agents assign values to CSS properties too. For example, when you do not declare margins on h1, the user agents have an initial value for margins. IE sets this to be 14pt, Firefox, Opera sets this to 0.67em, etc. This is not defined by the specifications and there is no keyword to obtain the values set by user agents.

Initial values are different from inherited values. All properties accept a keyword inherit. When you use the keyword inherit on a property, the browser applies the value that it finds on its parent element. On html element if you use the value inherit, it applies the initial value.

Good News!

Lea Verou alerted me to the CSS3 keyword initial which will set the CSS3 property to the initial value as defined in the spec. Sadly, the only browsers that supports this seems to be Firefox (with a -moz- prefix) and Webkit’s Safari and Chrome (yay!).

So until full support lands on all browsers for this amazing keyword and we don’t have to support browsers that do not recognize that keyword, here are some of the ways you can reset some CSS properties to their initial values:

Property	Value
background	transparent (transparent stands for rgba(0, 0, 0, 0)) or none or 0 0
border	none or 0
border-image	none
border-radius	0
box-shadow	none
clear	none
color	No value, so best option is to use inherit to cascade from a parent element’s color value.
content	normal
display	inline
float	none
font	normal
height	auto
letter-spacing	normal
line-height	normal
max-width	none
max-height	none
min-width	0
min-height	0
opacity	1
overflow	visible
page-break-inside	auto
position	static (not relative)
text-shadow	none
text-transform	none
transform	none
transition	none
vertical-align	baseline
visibility	visible
white-space	normal
width	auto
word-spacing	normal
z-index	auto (not none or 0)

Update: Pete links to this list of initial values he has compiled.

Thanks to Chris Coyier, Tab Atkins, Lea Verou, and Nicolas Gallagher for feedback on this post!