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 Scott Enslin
Scott Enslin
6,078 Points

I can not figure out how to target the span element inside the intro class when trying apply a rule in style sheet.

do I add inside the .intro rule or do i create a new one outside of it? Do I give the span an id?

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

}

3 Answers

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

The challenge specifically says to "create a new rule...". You can't nest rules in ordinary CSS.

Targeting something inside of something else is generally done with a descendant selector. You create this by naming the outer thing, then a space, then the inner thing. So the selector for a "span element inside .intro" is simply:

.intro span { }

Giving the span an id and targeting that instead might work fine in practice, but it's not what the challenge is asking for.

Scott Enslin
Scott Enslin
6,078 Points

Thank you for the timely response!

I originally tried that as well with and without the , but it gives me a error

When I type your suggestion- bummer! Make sure you're selecting the intro class and setting the font size value equal to 20px.

-never changed the font size from before?

When I do .intro, span{} it makes me redo the step before.

Tanja Schmidt
Tanja Schmidt
11,798 Points
Tanja Schmidt
Tanja Schmidt
11,798 Points

If you place a comma in between .intro and span it means your placing two independent selectors. Without the comma it is one specific selector that selects the span element inside the intro class.

.intro span {
   font-size: 1.25em;
}

Hope, this helps! :-)

Tina Maddox
Tina Maddox
28,102 Points
Tina Maddox
Tina Maddox
28,102 Points

Scott, Were you able to fix the issue? Tina

Scott Enslin
Scott Enslin
6,078 Points

Tina I did! had a mental lapse there! All set moving forward, thank you for checking.