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 Catherine Brooks
Catherine Brooks
2,799 Points

set background-color to orange, not accepting correct code, is there a glitch?

this is my code; what is wrong with it?

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

index.html 
<!DOCTYPE html>
<html>
  <head>
     <header id="top" class="main-header">
      <span class="title">Journey Through the Sierra Nevada Mountains</span>
      <h1 class="main-heading">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>
style.css 
/* Complete the challenge by writing CSS below */
.main-header {
  background-color:orange;
}

.main-heading {
  font-size: 72px;

#main-content {
  background-color: lightsteelblue;
}

2 Answers

Rich Bagley
Rich Bagley
25,869 Points
Rich Bagley
Rich Bagley
25,869 Points

Hi Catherine,

Your HTML code looks to be different from that of the original code challenge.

Before setting the background-color in the 2nd stage you should only need to change line 9 of the HTML from:

<header>

to:

<header class="main-header">

That should then work fine. Hope that helps.

-Rich

Catherine Brooks
Catherine Brooks
2,799 Points
Catherine Brooks
Catherine Brooks
2,799 Points

Thanks Rick; I didn't realize my code appeared below my post, I just typed it into my post, I'm somewhat of a newbie, especially at posting. I am having trouble getting my code to validate when I am almost certain it's correct because I've copied the correct code in, if I can find it, and it still won't pass, very frustrating to know you have the correct answer but it won't pass. Maybe I'm missing something.

Rich Bagley
Rich Bagley
25,869 Points

Hi Catherine,

I probably didn't explain my above answer clear enough. I was basing it on starting the challenge from scratch.

Your HTML code in the first stage of the challenge is incorrect which is making it seem as though your CSS is incorrect in the second stage.

Compare your code in the post to the original challenge HTML code and you will see that you're missing a few sections such as a closing head tag and opening body tag.

If we assume you're starting the challenge completely from the start you will only need to change one line for stage 1 of the challenge.

<header>

The above code (on line 9) will need:

class="main-header"

so it becomes:

<header class="main-header">

That's it. The first challenge should pass.

Moving on to the second challenge the only thing you need to add to the style sheet (line 2) is:

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

I think you already had this but as long as the HTML is correct in the first challenge this will also pass.

Hope this makes sense.

-Rich