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

Renee Thronebury
Renee Thronebury
761 Points
Posted by Renee Thronebury
Renee Thronebury
761 Points

The challenge states: Create a new rule that targets the span element inside .intro. How do I do this?

I tried to separate the two elements with space and then with a comma but It still says I'm wrong. If you are supposed to nest it inside of the element containing it why does it ask you to create a new rule? I'm stuck, Please HELP!

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, 
span {
  font-weight: bold;
  font-style: italic;
}

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

3 Answers

Ali Amirazizi
Ali Amirazizi
16,087 Points
Ali Amirazizi
Ali Amirazizi
16,087 Points

Try removing the comma and using a space between intro and span. This passed for me. If it didn't, then refresh and try the challenge again. Also make sure you make the rule proceeds the initial rule so it looks like this:

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

.intro span {
  font-weight: bold;
  font-style: italic;
}
TJ Egan
TJ Egan
14,420 Points
TJ Egan
TJ Egan
14,420 Points

Very close! Just remove that comma and you have it. 

.intro span {
 color: white;
}

What you were doing was targeting the .intro class AND all spans on the page. By using .intro span, you target ONLY the spans under the .intro parent class

Mitchell Springer
Mitchell Springer
2,576 Points
Mitchell Springer
Mitchell Springer
2,576 Points

Try this:

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