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) Basic Selectors ID and Class Selectors

Posted by Michelle Blandford
Michelle Blandford
3,975 Points

css basics challenge task 2 of 6

I continue to get the error message...Bummer! Make sure you're using a class selector that targets 'main-header'.

I have the following...

.main header { background-color: orange; }

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>
      <span>Journey through the Sierra Nevada Mountains</span>
      <h1>Lake Tahoe, California</h1>
    </header>
    <p>
      Lake Tahoe is one of the most breathtaking attractions 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="#">Find out more</a>
    <div>
      <h2>Check out all the Wildlife</h2>
      <p>
        As spawning season approaches, the fish acquire a humpback and protuberant jaw. After spawning, they die and their carcasses provide a feast for gatherings of mink, bears, and Bald eagles.
      </p>
      <a href="#">See the Wildlife</a>
    </div>
  </body>
</html>
<header class="main-header"></header>
.main header {
background-color: orange;
}
style.css 
/* Complete the challenge by writing CSS below */

2 Answers

Alexander Davison
Alexander Davison
65,469 Points
Alexander Davison
Alexander Davison
65,469 Points

You forgot to use a hyphen :) Instead, you used a space. Try changing

.main header {
     background-color: orange;
}

to this:

.main-header {
    background-color: orange;
}

See the difference? The selector was a little bit wrong but you did a great job! :)

This should work :smile:

Good luck and I hope this helps! ~Alex

Hugo Porfirio
Hugo Porfirio
4,584 Points
Hugo Porfirio
Hugo Porfirio
4,584 Points

Oh, it seems that you put your styles in the html file. But you're in the right path!

In the code, don't forget the hyphen in the class name:
.main-header = Selecting one class named 'main-header'. <=== You need this one!
.main header = Selecting two diferent things, a class named '.main' and a header element.

.main-header {
background-color: orange;
}

Move the code to styles.css and I think will be ok.

Alexander Davison
Alexander Davison
65,469 Points

Nice answer :)