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
Tarry Quint
2,347 PointsConfused. Converting px to em!
Using a font size of 16px as your context, convert the font-size of the H1 from pixels to ems.
<!DOCTYPE html>
<html>
<head>
<style>
body { font-size: 16px; }
h1 { font-size: 24px; }
h2 { font-size: 18px; }
p { font-size: 12px; }
</style>
</head>
<body>
<h1>Smells Like Bakin</h1>
<h2>Sizzling in the Oven</h2>
<p>Opposites really do attract, especially in our kitchen! We combine
unexpected flavors that melt together to create ironically delicious
desserts.</p>
</body>
</html>
I put 1.000em as the font size for the H1 tag and it's coming back my calculation is off? Confused!
5 Answers
James Barnett
39,199 Points@Tarry -
To go over how @Benjamin got those numbers ...
- The instructions state that our context is
16px.
- The instructions also state that our target is the
h1header. - The markup says that the
h1is24px.
The conversion formula is:
Target / Context = Result
h1 font-size / specified context = font size in em
24px / 16px = 1.5em
Rocco Tozzi
1,468 Points@James Barnett WHY is the context 16px? how do you figure out what the context is, whether it be 16px, or 24 px By the way, are these contexts usually multiple by 4 or 8 or 2? seems like it.
James Barnett
39,199 PointsRocco - in this particular question, the question says:
Using a font size of 16px as your context, convert the font-size of the H1 from pixels to ems.
In the case of setting font-size based on ems, there is a base font size, and then you use ems to make it larger or smaller relative to that base font size.
The reason in this case is that 16px is standard default context for (nearly) all web browsers. If you wanted larger body text you could change it using body: font-size property and then calculate based on whatever you set the base size of the body text to.
Benjamin Foultz
1,752 PointsTake the h1 and divide by the context. 24px / 16px = 1.5em
Tarry Quint
2,347 PointsThanks dude!