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 Foundations Web Typography Responsive Text and Vertical Rhythm: Part 1

Shariq Shaikh
Shariq Shaikh
13,945 Points
Posted by Shariq Shaikh
Shariq Shaikh
13,945 Points

Where is the inherited text size set in the css file

In the video the instructor states that he has the em units for this particular css file set to 18 pixels. What I would like to know is where in the css file is the configuration made for the em units?

I was looking through the css file in the final directory for the project files of this particular lesson (Responsive text and vertical rhythm - part 1) and could not figure it out

3 Answers

Ryan Scharfer
Ryan Scharfer
Courses Plus Student 12,537 Points

The size of 1em can actually vary within the stylesheet. At the body level of our style.css, 1em was equivalent to 16px -- this was the size inherited from the browser. Once Guil set the font-size to 18px in the body element (by setting the font-size to 1.125 em), he redefined the size of 1 em for all of the elements within the body element. For those elements, 1em is equivalent to 18px. You could actually redefine again the size of 1em for all of the elements inside the .wrap div by defining a font-size there.

So to answer your question more directly : he did not change the size of 1em for the entire css file, but he changed the size of 1em for all of the elements inside the body element. For the body element itself, 1em is equivalent to the 16px font-size inherited from the browser.

Ryan Scharfer
PLUS
Ryan Scharfer
Courses Plus Student 12,537 Points
Ryan Scharfer
Ryan Scharfer
Courses Plus Student 12,537 Points

The pixel equivalent for 1 em is always equal to the current font-size. If the font-size hasn't been yet defined for your element in your style-sheet and it is not inheriting a font-size from another element in your stylesheet, then 1em is equivalent to the font-size the browser sets.
Here you can find the default settings for several browsers. http://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements/6867287#6867287. As you will see, the default font-size for most browsers is 16px.

Ryan Scharfer
PLUS
Ryan Scharfer
Courses Plus Student 12,537 Points
Ryan Scharfer
Ryan Scharfer
Courses Plus Student 12,537 Points

I forgot something. If the current font-size for the element is not defined in your stylesheet, and If the reader adjusts the default browser settings (due to bad eye sight, for example), then 1em is equivalent to whatever the reader adjusted the default font size to.

Shariq Shaikh
Shariq Shaikh
13,945 Points
Shariq Shaikh
Shariq Shaikh
13,945 Points

but where in the css file for the video (style.css) is the current font size defined? When he converts his units from pixels to ems he states that he has 1 em set to 18 pixels not 16. My question directly relates to the content of the video rather than the general understanding of ems. At 2:44 of the the video he set the font size of the body to 1.125 ems. From there he converts any remaining font sizes to ems by dividing them by eighteen. Is it fair to say that at 2:44 of the video he changes the value of an em for the corresponding css file from 16px to 18px? I realize my wording may be slightly incoherent, let me know if you need further clarification.