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

HTML Build a Responsive Website Introduction to Responsive Web Design Converting Nested PX to EMs

Cipriano Mauricio
Cipriano Mauricio
3,560 Points
Posted by Cipriano Mauricio
Cipriano Mauricio
3,560 Points

What differentiates a nested style from a non-nested style?

It not clear in this vid. In the the previous example, the conversions were done on the the px target value in the css style sheet (.css). Here it is done on the in-line style in the html (index.)

Is this what makes it "nested" and therefore the em calc. needs to to use the context of 24 that the h1 is define in in the css style sheet?

Thanks!

4 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

The styles you see there are not inline styles. That's an internal stylesheet. Which was probably used simply for convenience so that you could see the html and css together on the same screen.

Inline styles are when you apply styles directly to an element using the style attribute.

So the internal stylesheet is not what makes it nested. What makes it nested is the parent/child relationship of the h1 and the a that you see in the markup. The a element is a child of the h1 element and so the font size in em's of the a element is relative to the calculated pixel font-size of its parent, the h1. So, since the h1 has a font size set in em's, you first have to calculate what that is in pixels so that you have your context from which to calculate the font size for the a.

Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

When you are selecting an element you can choose just one element or you could select elements within an element, which is referred to as nesting. 

a {
   color: white; /* styles every normal link to the color white */
}

/* here are two examples of nesting */

div a {
  color: red /* styles every link to the color red that is within a div element  */
}

.main li a {
  color: green; /* styles every link to the color green that is within an li element where that li is within an element with the class of main */
}

/*When this page loads, all links that do not meet the requirements of the selectors in the bottom two examples will be the color white as was declared for normal links. */
Cipriano Mauricio
Cipriano Mauricio
3,560 Points
Cipriano Mauricio
Cipriano Mauricio
3,560 Points

Thanks for the response Chris!

Therefore in example A, the a element is nested in the div selector. In B, the a element is nested in the li element which is nested in the class .main.

Can the parent/child terminology use here? a is child of li which is child of .main. Or is that not appropriate here?

Cipriano Mauricio
Cipriano Mauricio
3,560 Points
Cipriano Mauricio
Cipriano Mauricio
3,560 Points

Much clearer now thanks. Child result (ems) needs to be based on px font size of parent.

Thanks!

Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

Also note that you can use rem or root em to return to the normal value of em, disregarding the parent. Often times it is equal to 16px but depends on your browser.