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 Rem Units

marcos rodriguez
marcos rodriguez
1,214 Points
Posted by marcos rodriguez
marcos rodriguez
1,214 Points

I understand the uses of the units, but the em "problem" I didn't really understand?

So how did the size relate in the video? I was not sure what defined the page default text size? And why the .main-header caused the other selectors to change? Please Help!?

Also, when would I want to use REM? Just once or twice in a page to avoid the em mess?

1 Answer

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer
Jamie Reardon
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

The teacher applied the 1 em font size to the body rule to set the overall page's font size.

1 em is the equivalent of 16px which is the default font size for most browsers. By including that into your body, you have a baseline to work with for your page. But also, you ensure cross-browser compatibility with your page as well. The em unit is essentially a multiplier and is relative to the parent's font size.

In this case, the h1's parent is the main-header rule, and by default, has no font-size property given. Therefore when the teacher gives the h1 rule a font-size of 2em that is essentially multiplying from the body's 1em rule. So that is 2 x 16px which computes 32px.

This font-size from the body rule cascades down, which is a common thing to happen with certain styles in a CSS file (hence the term cascading in the name).

The rem unit helps when there are complicated or overused em values in your stylesheet. Since you know the em unit creates a compounding effect in which it cascades and is relative to its parent's font size. It will become complicated to style if you have a parent element such as the main header, that then gets given a specific em unit font size, that is also multiplied from the parent body rule. Then you give the children such as the h1 its own font size in ems which therefore becomes relative of the parent main header. This will also be multiplied. This is where using the rem unit helps because the rem unit is always relative to the root element of the page (<html>).

The HTML element can be given the font size of 1 em, and you can, therefore, use any element on the page to target to use the font size given to the root HTML element.

Since the cascading nature of the em unit occurs when using too many for different parents, it becomes messy to work with. Because the em unit is always relative to the parent elements font size. The rem unit is static and is only relative to the root element.

Hope this helps.