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

Sean McInnis
Sean McInnis
3,369 Points

Using em for the body

I have a question about why to use the em for the body. Why would you do that? Did he just do it to demonstrate the em's capability or is there a reason you would actually do that and if so can you give the reasons! Thanks Treehouse Community!

Cynthia Norwood
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Cynthia Norwood
Front End Web Development Techdegree Graduate 15,214 Points

The <em> element is often used to indicate an implicit or explicit contrast.

<p> In HTML 5, what was previously called <em>block-level</em> content is now called <em>flow</em> content. </p> In the Result here if you look on the MDN website the words block-level and flow are in italics.

In HTML 5, what was previously called block-level content is now called flow content.

Here is some more reasons listed on the MDN to use em.

It is often confusing to new developers why there are so many elements to express emphasis on some text. <i> and <em> are perhaps one of the most common. Why use <em></em> vs <i></i>? They produce exactly the same result, right?

Not exactly. The visual result is, by default, the same - both tags render its content in italics. But the semantic meaning is different. The <em> tag represents stress emphasis of its contents, while the <i> tag represents text that is set off from the normal prose, such a foreign word, fictional character thoughts, or when the text refers to the definition of a word instead of representing its semantic meaning. (The title of a work, such as the name of a book or movie, should use <cite>.)

An example for <em> could be: "Just do it already!", or: "We had to do something about it". A person or software reading the text would pronounce the words in italics with an emphasis.

An example for <i> could be: "The Queen Mary sailed last night". Here, there is no added emphasis or importance on the word "Queen Mary". It is merely indicated that the object in question is not a queen named Mary, but a ship named Queen Mary . Another example for <i> could be: "The word the is an article". Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em

1 Answer

I think you're asking about the css size unit of "em", correct?? If so, the em size is reflective of the element's parent font-size. Therefore, it's easy to change a single font-size of a particular element, and all children elements that are sized via em will change automatically. To use the em size on a body element would then reflect it's parent which is <HTML>. I believe most, if not all, browsers default to 16px font-size. If using em to size other elements, might as well use em on the body for consistency sake - but you don't have to.

Hopefully that helps.