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 Enhancing Design with CSS Styling Text Importing Fonts

Thomas Pool
PLUS
Thomas Pool
Courses Plus Student 1,665 Points
Posted by Thomas Pool
Thomas Pool
Courses Plus Student 1,665 Points

The H3 font size in 1.25rem. The HTML is 1.25em. Should both text sizes equal 20px? H3 in chrome is 25px

When inspecting the H3 element in chrome, the font-size is showing at 25px. The font-size declaration within the H3 selector is 1.25rem - Which to my understanding is relative to the root element, being the HTML selector? Which is 1.25 em (20px).

If they're both 1.25, then how come the H3 is 25px and not 20px?

2 Answers

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

Hey Thomas Pool ! :wave:

If the <html> element's font size is set using em, its computed value will be based on the default font size of the browser, which is typically 16px.

Setting the <html> element to 1.25em means the root font size is 16px * 1.25 = 20px.

Setting the H3 element to 1.25 rem means it will be 1.25 * 20px = 25px, as rem units are based on the root element's computed font size.

I hope this helps and makes sense!