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

alan ingram
PLUS
alan ingram
Courses Plus Student 3,979 Points
Posted by alan ingram
alan ingram
Courses Plus Student 3,979 Points

What would be rem best practice?

I have seen people do something like put a font-size in the css file for html or body and set it to 14px or 16px, then use rems throughout the css file. Is that a better or easier way to use rems? Or is it just a more predictable way to make sure everything is based purely on that root size? Basically, would that work?

2 Answers

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

A "font-size" setting only affects "rem" units if the selector applies it to the document root (":root" or "html").

If so, it should work just as you expect. But it's more common to use relative (em) units to make it easier to make changes in different sections of the page at a later time.

alan ingram
PLUS
alan ingram
Courses Plus Student 3,979 Points
alan ingram
alan ingram
Courses Plus Student 3,979 Points

so youre saying that if the file read... html{font-size: 14px;} p{font-size: 1.4rem;} h1{font-size: 2.12rem;} so on and so forth{font-size: .75rem;}

would be the best way to go about it?

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

Sure, if you need a root reference. But em's are more common (and more flexible).