What does the value 'initial' mean?

The word "initial" is used to set the element back to its default value. Whatever value happens to be the default value for a given element's attribute, "initial" will set the attribute back to that default, or "initial", value. For instance, <div> elements have a default display value of block. So if you set it to display: inline-block, but then need it to revert back to its default in, say, a media query, you can set the display value to initial, and it'll put it back to its default setting, or the "initial" setting that I had as the default.

It resets the value of to its default browser value. This way with media queries you can start fresh basically and have everything back to normal making it easier for you to style it the way you want.

Take a look at this site showing you what it does it has an example.

http://www.w3schools.com/cssref/css_initial.asp

The initial value that it is set back to is the initial value in the css specification and not the browser default value in its style sheet.

Here's a property table for css2 which shows, among other things, the initial value for each property. http://www.w3.org/TR/CSS2/propidx.html

So when you use the initial keyword it's supposed to set it back to what you see in the "initial value" column. This doesn't match up entirely with browser defaults.

For instance, if you use display: initial then it's going to set it back to inline regardless of which element you use it on. So a div will be set back to inline even though it's browser default is block.

Also, the initial keyword is not supported in IE. So using this keyword may cause broken layouts for you in IE.