Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Layout Techniques Float Layout Floating Columns and Images

What does the value 'initial' mean?

Hey…

I came across this code in one of the videos. It's a media query that changes the values back to initial whenever the screen is 768 px or less. Here's the code…

/* @media screen and (max-width:768px){ .main-wrapper,.main-nav li, .main-logo{ width:initial; height:initial; float:initial; }

}

I just don't understand what initial is…what is it changing the values back to?

Any help would be great. Thanks.

4 Answers

The initial keyword is used to set a CSS property to its default value. In width and height initial is the same thing as auto, the browser will set the width and height, in for float it will become float:none;

Adam Moore
Adam Moore
21,956 Points

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.

Adam Moore
Adam Moore
21,956 Points

Hmm, apparently I was a little off. Thanks, Jason! I seem to learn something new from you everyday! And thanks for the reference to w3.org!

Kevin Murphy
Kevin Murphy
24,380 Points

Jason - Thanks for the concise explanation and the link! A lot of confusion out there on what "default" actually means. And I could not find a table via google that listed the initial values anywhere. Next time I'll start with the W3 and the forum. Thanks again.