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 Doug Allen
Doug Allen
1,605 Points

Bold font error

bold font error

index.html 
<!DOCTYPE html>
<html>
  <head>
    <p class="intro">
    <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>
        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: 1.6em;
}

.intro span {
font-weight: bold;
font-style: italic;

}

3 Answers

Paul Ryan
Paul Ryan
4,584 Points
Paul Ryan
Paul Ryan
4,584 Points

In your CSS, instead of using Font-size, just use size, and where you have 

 <p class="intro">

change that to

<div class = "intro">

and then end the div where you want it ended with

</div>

Then in your css try

.intro .title
{font-weight: bold;}

Keep practicing your skills and learn some more about using divs

Shaun Moore
Shaun Moore
6,301 Points
Shaun Moore
Shaun Moore
6,301 Points

FYI I deleted the duplicate question howeevr you had an answer in there from :

@p1xt This was the answer:

The issue is that your paragraph with the intro class is up in the head element. Instead, if you apply the intro class to the paragraph down in the body, your CSS works fine :)

      <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>
Erwin Meesters
Erwin Meesters
15,088 Points
Erwin Meesters
Erwin Meesters
15,088 Points

To sum it up a bit:

  • remove the p tag out of the head, it doesn't belong there. Only the body is the visible thing on screen and the only place which contains paragraph tags.

  • give the p on line 14 a class of intro (the lake Tahoe paragraph)

  • for cleaner code never use capital letters in your html tags or css

  • your css should look like this:

/* Complete the challenge by writing CSS below */
.intro {
  font-size: 1.25em; 
  line-height: 1.6;
}
.intro span {
  font-weight: bold;
  font-style: italic;
}
a:link {
 text-decoration: none; 
}