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

Posted by Besleaga Alexandru Marian
Besleaga Alexandru Marian
1,754 Points

Help with the challenge, don't seem to find the correct result on this math problem.

So if the font-size is 1.25em (20px) then 1.6 larger then this value would be (25.6px ) divided by 16 would be 1.6em resulting in a 2.85em. So now we do 1.25em the initial font-size value + 2.85em = 4.1em right ? Please help!

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:3.85em
}
Courtney Crawford
seal-mask
.a{fill-rule:evenodd;}techdegree
Courtney Crawford
Front End Web Development Techdegree Student 2,882 Points
Courtney Crawford
.a{fill-rule:evenodd;}techdegree
Courtney Crawford
Front End Web Development Techdegree Student 2,882 Points

Hi,

The line-height should be 1.6. I had a little trouble on this one too. You don't have to use any math on this question.

Answer should be: .intro { font-size: 1.25em; line-height: 1.6; }

Exclude the em from the line-height. :)

1 Answer

Oenas Vaes
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree seal-36
Oenas Vaes
Front End Web Development Techdegree Graduate 17,319 Points
Oenas Vaes
.a{fill-rule:evenodd;}techdegree seal-36
Oenas Vaes
Front End Web Development Techdegree Graduate 17,319 Points

Hello,

The recommended method for defining line height is using a number value, referred to as a "unit-less" line height.

Unit-less line heights are recommended due to the fact that child elements will inherit the raw number value, rather than the computed value. With this, child elements can compute their line heights based on their computed font size, rather than inheriting an arbitrary value from a parent that is more likely to need overriding.

In your case the answer would be;

.intro { font-size: 1.25em; line-height: 1.6; }

If you'd like you can read more about line-height property at the Mozilla Developer Network.