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

Sofya Trachsel
Sofya Trachsel
3,516 Points
Posted by Sofya Trachsel
Sofya Trachsel
3,516 Points

Give intro a unitless line-height that's 1.6 times larger than the font-size value.

Got stuck - I've tried all the different ways, what is the right answer?

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: 1.25em/1.6;
}
Sofya Trachsel
Sofya Trachsel
3,516 Points
Sofya Trachsel
Sofya Trachsel
3,516 Points

Solved it. for some reason it didn't work at first -

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

4 Answers

Colin Bell
Colin Bell
29,679 Points
Colin Bell
Colin Bell
29,679 Points

You just have to declare a "line-height: 1.6;"

/* Complete the challenge by writing CSS below */
.intro {
  font-size: 1.25em;
  line-height: 1.6;
}

to use the "font:" shorthand property, two things have to be set: font-size and font-family.

/* Complete the challenge by writing CSS below */
.intro {
  font: 1.25em/1.6 inherit;
  /*The intro paragraph will inherit the font family of its parent element.*/
}
Sofya Trachsel
Sofya Trachsel
3,516 Points
Sofya Trachsel
Sofya Trachsel
3,516 Points

Thank you, I figured it out. For some reason it didn't work at first.

Mariet Dryas
Mariet Dryas
3,505 Points
Mariet Dryas
Mariet Dryas
3,505 Points

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

anthony cummings
anthony cummings
9,961 Points
anthony cummings
anthony cummings
9,961 Points

.intro {

font-size: 1.25em; line-height: 160%; /* see w3school on line-height values. 160% is the correct answer for the .intro because that is where it's assigned! */

}

niraj kishor
PLUS
niraj kishor
Courses Plus Student 1,123 Points
niraj kishor
niraj kishor
Courses Plus Student 1,123 Points

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

line height generally multiplies font-size after the decelaration