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

Ivan Uvarov
Ivan Uvarov
22,403 Points
Posted by Ivan Uvarov
Ivan Uvarov
22,403 Points

Why convert to em?

As I know the purpose of using ems is to make font size to be relative to the parent's font size. So, if you change parent's font size, the element's font size should scale accordingly. But in this video when we set font size to be em(24px) it will always be 24px no matter what the base font size is. So why use em(24px) in this case and not just 24px?

2 Answers

Andrew Hansen
PLUS
Andrew Hansen
Courses Plus Student 6,454 Points
Andrew Hansen
Andrew Hansen
Courses Plus Student 6,454 Points

The idea behind ems is to use a scalar value. So, the value would be set to 1.1em and the result would be a font that is 1.1 times bigger than the parent value.

ellie adam
ellie adam
26,377 Points
ellie adam
ellie adam
26,377 Points

http://www.w3schools.com/tags/ref_pxtoemconversion.asp

Each is a unit of length used to define the size of elements on a webpage. You can use them across the board on divs, margins, padding, and so on, Ems are a relative measure of length. The size of an em is relative to the font-size of its parent element. If you have a <div> with the font size is set to 16px, and a <p> element inside that div with a font-size set to 2em, the font-size of text in the <p> will be 32px; set it to 0.5px, and the font-size will be 8px. As you might imagine, this is great for responsive design, where you can set breakpoints for device screen sizes with media queries, change the absolute px measure for elements at different break points, and have all the em-measured elements resize for you — it makes responsive CSS much easier to write and maintain.