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 and Rem Units

Posted by Scott Craig
Scott Craig
41,171 Points

I hate em's. Why is this not working please?

with a starting font size of 1.8em i'm suppost to create a h2 rule and use em's to set it to 53px.

I first went on http://pxtoem.com/ and converted the em to px to get the starting value (28px)

to apply a rem value which modifies that to become 53 px I divided 53 by 28(initial value) which gives 1.89.

So what should happen is 1.89 * the initial 1.8em value which should give 53px.

What have i done wrong here please?

style.css 
/* Complete the challenge by writing CSS below */

header {
  font-size: 1.8em;
}

.title {
  font-size: 1.625rem;
}

h1 {
  font-size: 5.625rem;
}
h2 {
  font-size: 1.89rem;
}
index.html 
<!DOCTYPE html>
<html>
  <head>
    <title>Lake Tahoe</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <span class="title">Journey through the Sierra Nevada Mountains</span>
      <h1>Lake Tahoe, California</h1>
    </header>
    <div class="main-content">
      <p>
        Lake Tahoe is one of the most breathtaking attractions located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation.
      </p>
      <a href="#">Find out more</a>
      <h2>Check out all the Wildlife</h2>
      <p>
        As spawning season approaches, the fish acquire a humpback and protuberant jaw. After spawning, they die and their carcasses provide a feast for gatherings of mink, bears, and Bald eagles.
      </p>
      <a href="#">See the Wildlife</a>
      <h3>From Tents to Resorts</h3>
      <p>
        Lake Tahoe is full of wonderful places to stay. You have the ability to sleep in the outdoors in a tent, or relax like a king at a five star resort. Here are our top three resorts:
      </p>
    </div>
    <footer>
      <p>All rights reserved to the state of <a href="#">California</a>.</p>
      <a href="#top">Back to top &raquo;</a>
    </footer>
  </body>
</html>
Francesco Bonalume
Francesco Bonalume
5,332 Points
Francesco Bonalume
Francesco Bonalume
5,332 Points

rem is only relative to the html (root) font-size. not the header font size! this is why I think It doesn't work!

5 Answers

Robert Richey
PLUS
Robert Richey
Courses Plus Student 16,352 Points
Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Hi Scott,

You'll need a calculator for this one. The formula for creating ems is TargetFontSize / ParentFontSize. We know the target size is 53px and the parent's font size is 16px. All that's left is to plug that into a calculator and the result is in ems.

Best Regards

Edited for clarity

Scott Craig
Scott Craig
41,171 Points
Scott Craig
Scott Craig
41,171 Points

Yep. That was the first thing I did. The editor refused to accept 3.3125 rem (I even tried or even 3.313 rounded) so I assumed it was wrong.

That's what lead me to try the above. on the basis that 1.8em might be the root starting size.

I retired just now and it still won't accept 3.3125 rem as an answer.

Really frustrating

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

ems, not rems. Try this

font-size: 3.3125em;
Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

ems are relative to the parent element

rems are relative to the html element (the root element)

Scott Craig
Scott Craig
41,171 Points
Scott Craig
Scott Craig
41,171 Points

It shouldn't be em though should it. It should be rem.

The h2 has a parent element (header) already which modifies the root by 1.8rem.

So if the root size is 16px and you apply ems's instead of rems the effect would be to multiply the 16px by 1.8 and then 3.3125? Which wouldn't give 53px?!

What am I missing? Does using rems not have an inheritance effect on the size of child elements the same way ems do?

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

The challenge description changes subtly from parent header's to just parent. If you click over to index.html, you'll see that the h2 parent is a div. That div has a font-size of 16px and is what h2 is being relatively sized against.

The h2's parent element has a font-size value of 16px.

Scott Craig
Scott Craig
41,171 Points
Scott Craig
Scott Craig
41,171 Points

Okay. Thanks.

Laura Beeby
Laura Beeby
2,654 Points
Laura Beeby
Laura Beeby
2,654 Points

I had problems with this too...but only because I didn't go one more decimal place! Stupid...