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 Basics (2014) Understanding Values and Units Em Units

Shuangshuang Zhao
Shuangshuang Zhao
5,822 Points
Posted by Shuangshuang Zhao
Shuangshuang Zhao
5,822 Points

Is the font size of the parent element a default setting, or can we change it?

I understand that the "parent element" is a relative definition. In this case, the font-size in of the body element,as a parent element, defines the font-size of the span. My question is what defines 1em=16px in the body element? Is it a fixed setting or can we change it?

2 Answers

Jason DeValadares
Jason DeValadares
7,190 Points
Jason DeValadares
Jason DeValadares
7,190 Points

EM's are a relative size, there's no pre-determination. They may differ across browsers as well as screen sizes and the resolutions on each of those screens. The best suggestion for visibility would be the advice given on the responsive websites course here - judge with your eye and adjust with media queries as the screen size and resolution changes.

Google describes and EM perfectly here: An em is a CSS unit that measures the size of a font, from the top of a font's cap height to. the bottom of its lowest descender. Originally, the em was equal to the width of the capital. letter M, which is where its name originated.

hum4n01d
hum4n01d
25,493 Points
hum4n01d
hum4n01d
25,493 Points

Yes, you can change the font-size of the body element by writing:

body { font-size 1.5em; }

which will make the relative font size for text 0.5em larger. Then any text within the body element’s default font size will be based off of the 1.5em or 24px. If you want the ems to be based off of the original 16px, use rems. (1rem = 16px)

Hope that helps!

Austin Whipple
Austin Whipple
29,725 Points
Austin Whipple
Austin Whipple
29,725 Points

Careful here, though. rem refers to the font size set in the root element. So in properly built HTML files that's the html element. If you change the font-size on html to 24px and body is 1.5em, you're now up to 36px.

hum4n01d
hum4n01d
25,493 Points

Right, Austin Whipple , sorry