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 Basics (2014) Understanding Values and Units Em Units

rajbee
rajbee
6,657 Points
Posted by rajbee
rajbee
6,657 Points

order of elements and relative sizing

I could try this. But, I'll ask anyway. Does the order of CSS declarations for parent and its nested html elements decide the relative sizing (em's) ? eg. body has font 2em. child h1 in body has 10em. In css file, body h1 code comes before body code. what will the size of the h1 be ? 16px * 10 or 16px * 10 * 2 ?

Gunhoo Yoon
Gunhoo Yoon
5,027 Points
Gunhoo Yoon
Gunhoo Yoon
5,027 Points

16px * 10 * 2 which is 320px.

rajbee
rajbee
6,657 Points
rajbee
rajbee
6,657 Points

The answer to my question is yes. The order in which you declare h1 and body has nothing to do with the sizing. So, the browser's css parser loads all the declarations, looks at top level element declarations first (i.e. body) and sets its font size, and then looks at child elements like h1 ? 

<body>
    <h1>Headline</h1>
</body>

h1 {
    font-size: 5em;
}

body {
    font-size: 1.2em;
}

1 Answer

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi Raj,

The CSS cascade would only take affect on the element if it had been declared and then overridden further down as you would expect with any CSS.

I will do my best to explain and show you how ems work a bit better.

Firstly, em values are relevant to the parent elements font size. So padding of 1em on a H1 element is larger than padding of 1em on an H3 element. This is perfect for responsive design!

Please take a look at this, it is worth messing around with the values to see what goes on.

Do not be put of if you find them a little confusing. I found this very difficult to get a grasp of at first.

Everything you need to know is in the code comments on the pen :)

Craig