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

Adrian Jewell
Adrian Jewell
3,038 Points
Posted by Adrian Jewell
Adrian Jewell
3,038 Points

why does the em unit affect px unit?

In one of the previous videos it demonstrated that font-size: 150%; would affect all the font sizes of the page except font-size values that are defined in pixels as they are absolute. So I was hoping somebody could simply explain to me why the em unit when defined in a parent element would render an affect on a child elements font-size value when it is defined in pixels?

4 Answers

Felipe Belinassi
Felipe Belinassi
1,567 Points
Felipe Belinassi
Felipe Belinassi
1,567 Points

Adrian, I think you've already solved your problem, but i'll explain for anyone that might have the same doubt. You didn't set a font-size to all elements on the page (like 'p' and 'a' elements). That's why the font-size is changing when you put another value in body font-size. The other elements (which you set the font-size to 20px) will still be 20px. You can see this through the developer tools in Google Chrome.

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

A font size expressed in pixels(px) should not be affected by sizes of parent elements, whether they are in ems or also in pixels. The effect you are describing would probably be a result of a rule with higher specificity overriding the one you intended to target the child element. This is my best guess without seeing a specific example of the issue.

If this is something shown in the video, can you give the time index where this is seen?

And if this is something you're experiencing in exercises, please share you code (both HTML and CSS).

Adrian Jewell
Adrian Jewell
3,038 Points
Adrian Jewell
Adrian Jewell
3,038 Points 
/* Type Selectors ------------------ */

body {
  color: #878787;
  margin: 0;
  font-size: 3em; /* 16px */
}

h1 {  
  font-size: 20px; /* 90px/16px  */
  color: rgba(255, 255, 255, 1); /* Alpha value of "1" makes element fully opaque */
  text-transform: capitalize;
}

h2 {
  font-size: 20px; /* 53px/16px  */
}

h3 {
  font-size: 20px; /* 20px/16px  */
  color: #48525c;
}

/* Pseudo-classes ------------------ */

a:link {
  color: rgb(255, 169, 73);
}

a:visited {
  color: lightblue;
}

a:hover {
  color: rgba(255, 169, 73, .4);
}

a:active {
  color: lightcoral;
}

/* ID Selectors -------------------- */

#main-footer {
  padding-top: 60px;
  padding-bottom: 60px;
  border-bottom: solid 10px #ffa949;
}

/* Class Selectors ----------------- */

.main-header {
  background-color: #ffa949;
}

.title {
  color: white;
  font-size: 20px; /* 26px/16px */
}
Adrian Jewell
Adrian Jewell
3,038 Points
Adrian Jewell
Adrian Jewell
3,038 Points

So here I changed all of the font sizes in every other element to twenty except body which is at 3 em. and if I the size of all the texts changes if I change the em value. I actually did it with the percentage value as well and it actually also altered the size. I would have thought that all the other elements are more specific so if 20px is 20px why does the text size change. I am missing something here and I also feel it contradicts the cascading nature of css.