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

Posted by Colin Marshall
Colin Marshall
32,861 Points

Responsive Text & Vertical Rhythm Part 1 Question

Let me make sure I understand this correctly...

You set a body font-size to 1.125em since you want it to be 18px instead of the standard 16px (1em) that browsers have. I understand this part fine.

Since you set the body font-size 1.125em (~18px) then whenever you set a font-size with em's to any other element you should divide by 18px instead of 16px to get the em's? So 1em is now is 18px in all contexts besides the initial body font-size when you're using font-size with em's?

Thanks!

3 Answers

Abhay Sharma
Abhay Sharma
8,287 Points

Colin Marshall yes you are right . Further if you have another element inside a div and set its font-size in em it will be calculated based on the context of the parent element. Example: body font-size: 1.125em = 18px , if we have a div with font size 1.3333em(~24px based on 18px context) and a h1 inside div which we want to set to 72px will be 3em(72 / 24) not 4em (72 / 18)

Chris Howell
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Chris Howell
Python Web Development Techdegree Graduate 49,703 Points
Chris Howell
.a{fill-rule:evenodd;}techdegree seal-36
Chris Howell
Python Web Development Techdegree Graduate 49,703 Points

By default 16px is (1em) unless you specify otherwise.

So If I wanted to I could go into my css, set the

body { FONT-SIZE: 18px; }

which would then set my new default EM size to 18px, then anywhere else I could use 1EM now(18px) and 1.125EM would now become 20.25px.

18 x 1.125 = 20.25px

So yes, sounds about right to me! ;)

But also keep in mind what Abhay said as well.

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

Thanks guys!