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

Jason Brua
Jason Brua
969 Points
Posted by Jason Brua
Jason Brua
969 Points

I'm lost

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

: identified as a span class, does the above not set weight to bold and style to italic?

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: 1.6;
}

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

3 Answers

jacobproffer
jacobproffer
24,604 Points
jacobproffer
jacobproffer
24,604 Points

Hey Jason,

Currently, you are selecting the intro class twice. Instead, you need to target the span element that is nested inside of the intro class.

Do you remember how do that?

Here's an example:

.example p {
   color: #fff;
}

Best,

Jacob

Brian Hankins
Brian Hankins
5,735 Points
Brian Hankins
Brian Hankins
5,735 Points

Jason,

Expanding a little more detail in Jacob's answer above. You will either need to set the span or the title class to complete this challenge. You need to change the second .intro you have to either span or the span class of .title as shown below. I believe in this challenge Option 2 would be the best.

Option 1:

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

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

Option 2:

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

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

Brian

jacobproffer
jacobproffer
24,604 Points

Hey Brian,

Thanks for the input! However, if you take a look at the code challenge, neither of these options will pass.

The challenge is specifically asking the user to create a new rule that targets the span element inside .intro.

Here is the correct form:

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

This is called a descendant selector.

Here is a handy reference: CSS Combinators.

Best,

Jacob

Jason Brua
Jason Brua
969 Points
Jason Brua
Jason Brua
969 Points

Thanks Fellas!

Makes sense and I've got it!

Jacob- How you solved the issue is exactly how I ended up figuring it. Not quite the typical scenerio I expected but, it was appropriate for the challenge.

thank you!