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 alan rado
alan rado
902 Points

I need to create a new rule that targets the span element inside the .intro. class. Where does the span go?

I already created the .intro class. I can't figure where the span goes.

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

Damien Watson
Damien Watson
27,419 Points
Damien Watson
Damien Watson
27,419 Points

Hi Alan,

The span is a tag, so doesn't need to have a '#' or '.' at the beginning. Also being a child of the intro class means the intro class is it's parent. Having a space between the names means that the following element is a child of the one to the left of it.

.intro span {}

For this structure:

<section>
  <a href="#" class="special">
    <span>Hello</span>
  </a>
</section>

You could have the following (verbose) css, which means a span inside an anchor (with class 'special') inside a section:

section a.special span { color:red; }

You were on the right track with your original css, this will get you up to question 5:

.intro {
  font-size:1.25em;
  line-height:1.6;
}
.intro span {
  font-weight:bold;
  font-style:italic;
}

In the CSS, setting the 'text-decoration' to 'none',

a:link {
  text-decoration:none;
}
alan rado
alan rado
902 Points
alan rado
alan rado
902 Points

Hi Damien,

This is what I'm being asked to do: Create a new rule that targets the span element inside .intro. Give the span element a bold font weight and an italic font style. Make sure you're selecting the intro class, and setting an em font-size value equal to 20px. This is what I did but it's not working:

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

Damien Watson
Damien Watson
27,419 Points
Damien Watson
Damien Watson
27,419 Points

Updated answer above, the font-size should be within your 'intro' class.

The final question '5' asks you to remove the underline from all 'a:link' tags, see how you go from here. :)

alan rado
alan rado
902 Points
alan rado
alan rado
902 Points

Thanks Damien,

I figured it out.

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

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

However, I'm lost on this one:

"Create a new rule that removes the underline from all unvisited links on the page." Is this in the HTML or CSS?

MUZ141116 Tafadzwa Paza
MUZ141116 Tafadzwa Paza
12,893 Points

you just add this code to your CSS

a:link { text-decoration: none; }