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 Styling the Intro Paragraph

Zac Stu
Zac Stu
7,891 Points
Posted by Zac Stu
Zac Stu
7,891 Points

After assigning 1.25em to fontsize, why not 2em for linehight given properties in same class? Why would they compound?

I tried to assign 1.25em to font-size and 2em to line-height (1.25*1.6=2).

However, 2rem is the correct value for the line-height property. Why do we need rem instead of em? I wouldn't think that there would be a compounding effect because they are in the same class.

-confused about compounding

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 id="top" class="main-header">
      <span class="title">Journey Through the Sierra Nevada Mountains</span>
      <h1>Lake Tahoe, California</h1>
    </header>
    <div class="primary-content t-border">
      <p class="intro">
        Lake Tahoe is one of the most <span>breathtaking attractions</span> 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="#more">Find out more</a>
    </div>
    <footer class="main-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>
style.css 
/* Complete the challenge by writing CSS below */
.intro {
  font-size: 1.25em;
  line-height: 2rem;
}

1 Answer

Jake Fleming
STAFF
Jake Fleming
Treehouse Guest Teacher
Jake Fleming
Jake Fleming
Treehouse Guest Teacher

A rem is a unit that is derived from a selector's parent element. In this case, a rem is equal to 16px; Although, 2rem works in this situation, because 2 x 16 = 32, it's not actually the correct answer.

You need to do 20 x 1.6 which is also equal to 32.

Your font-size is equal to 20px, because your em in that situation is equal to 16px (this information is given to you in the 2nd task) So 1.25 x 16 is 20. Your line-height is then based off the font-size of your selector (20px). It isn't based on 16px anymore.

So If you were to give your selector a line-height that is 2ems, that would mean you are multiplying your selector's font-size by 2. In this case that would mean you are multiplying 20 x 2 which would be 40px.

What you actually need to do is this:

.intro {
  font-size: 1.25em; // which equals 20px
  line-height: 1.6; // which equals 32px
}

This was kind of tricky to explain, so I hope I didn't confuse you even more! -_-

Zac Stu
Zac Stu
7,891 Points
Zac Stu
Zac Stu
7,891 Points

No, its clear. I had missed the part where he mentioned that the line-height em is based off of the font-size em, not the root pixel value of 16px. I picked up on it later on though. Thanks!