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

Robbie Singh
Robbie Singh
3,675 Points
Posted by Robbie Singh
Robbie Singh
3,675 Points

How do I correctly target the span element within a class?

I keep getting the message to make sure that I am targeting the span element in the intro class. Any suggestions?

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 class="par1">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.6;
}

.par1 {
  font-weight: bold;
  font-style: italic;
}

6 Answers

Snow Girl
seal-mask
.a{fill-rule:evenodd;}techdegree
Snow Girl
Full Stack JavaScript Techdegree Student 11,438 Points
Snow Girl
.a{fill-rule:evenodd;}techdegree
Snow Girl
Full Stack JavaScript Techdegree Student 11,438 Points 
.intro {
  font-size: 1.25em;
  line-height: 1.6;
}

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

That should do you! You don't need to put the class 'par1' on the span tag - I don't think it asked you to do that. You are targeting the span tag like I did here.

Daniel Hair
Daniel Hair
5,080 Points
Daniel Hair
Daniel Hair
5,080 Points

Yeah, to target the span class directly, have it like this:

span.par1 {
  font-weight: bold;
  font-style: italic;
}

So add "span" in front of the class declaration. This way, it will only style span tags with the "par1" class

Robbie Singh
Robbie Singh
3,675 Points
Robbie Singh
Robbie Singh
3,675 Points

Tried that. It still gives me the message to make sure that I'm selecting the span element in the intro class.

Wesley Letscher
Wesley Letscher
1,942 Points
Wesley Letscher
Wesley Letscher
1,942 Points

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

Snow Girl
seal-mask
.a{fill-rule:evenodd;}techdegree
Snow Girl
Full Stack JavaScript Techdegree Student 11,438 Points
Snow Girl
.a{fill-rule:evenodd;}techdegree
Snow Girl
Full Stack JavaScript Techdegree Student 11,438 Points

You want to make sure to target the span tag that is inside the class "intro" - the span tag is a child element of the "p" element with class "intro". So in order to specify it is a child of the "intro" class, you would do as follows:

.intro .par1 {
/* your code here */
}

/* or */

.intro span {
/* your code here */
}
Robbie Singh
Robbie Singh
3,675 Points
Robbie Singh
Robbie Singh
3,675 Points

I tried both but it's still saying: Bummer! Make sure you're selecting the intro class, and setting an em font-size value equal to 20px

Nathi Taengnim
Nathi Taengnim
12,705 Points
Nathi Taengnim
Nathi Taengnim
12,705 Points

You can do 

  .intro span{
}

alternatively 

 p span{
}
Peter Connolly
Peter Connolly
2,010 Points
Peter Connolly
Peter Connolly
2,010 Points

None of the above worked for me. DId anyone work this out in the end?