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

Jonathan Evans
Jonathan Evans
2,946 Points
Posted by Jonathan Evans
Jonathan Evans
2,946 Points

I keep multiplying the font-size value by 1.6 and I get the answer of 2, but telling me I'm wrong? Help?

I keep multiplying the font-size value by 1.6, and entering the answer as unitless, but keep getting the 'bummer' message telling me to make sure I'm multiplying the font-size value by 1.6. Is this a bug or am I missing something? and I know I dont have a semi-colon after '2', that's not the problem. just took it off and forgot to put it back before writing this question.

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: 2
}

2 Answers

nico dev
nico dev
20,364 Points
nico dev
nico dev
20,364 Points

Hi Jonathan Evans ,

Well, don't feel bad for falling for that one like many of us have! :) The thing is that question is made with a little bit of trap on it.

Yes, the line-height has to be 1.6 times larger than the font-size value. But the trap lies in this word: unitless (in other words, not in em).

Take a brief look here at the MDN explanation of the <number> (or 'unitless', which is the same) values in line-height.

I am sure after reading the paragraph linked above, you'll get it, but should anything be unclear, feel free to follow up. We're here to help, or at least try if we can.

Jonathan Evans
Jonathan Evans
2,946 Points
Jonathan Evans
Jonathan Evans
2,946 Points

It still isn't working out for me. I honestly can't figure out what I'm doing wrong. The examples look the same as what I've been attempting: an integer with no unit. I read over the MDN page a few times and went to a few other sites, but still did not find anything different. I then tried using different values and checking the Preview to make sure the code is working, and it is working with every unitless value for line-height I enter into it.

nico dev
nico dev
20,364 Points
nico dev
nico dev
20,364 Points

Sure. It will work.

But just take into account you want to multiply that 1.25em value by 1.6, but if you multiply them, what you get is the same unit: 2em.

Now, since you don't want to express the line-height in em but as a unitless number, that means that does not apply.

So, there has to be a way to find out the value, and there is. Partly, in the mentioned paragraph above (which I happen to link a little wrongly, sorry, but I meant within that page the "<number>" paragraph), it says:

The used value is this unitless <number> multiplied by the element's own font size.

That is, it is unitless because the value is the number to be multiplied by the font-size of the respective selector. Thus, if you give it a value of 2, for instance, you're telling the browser: "Hey, go ahead and multiply the current value of this selector's font-size by 2; and now that will be the line-height".

So, with 2, the browser will give it a line-height of 2.5em (or 40px in this case, too).

Note that, as much as <number>, another of the alternative values would be with a <length> unit, such as px or em, but you should make it explicit (like, say, 2em).

Did that help clarify it a bit?