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

JavaScript CSS Selectors Quickstart CSS Selector Basics Basic Selectors Challenge

jl21591
jl21591
7,214 Points
Posted by jl21591
jl21591
7,214 Points

Why is this answer wrong.

Finally, in index.html, give the <div> element a class of main-content. In style.css, select that class and set the background color to ivory. I'm getting the 'Bummer message".

style.css 
/* Complete the challenge by writing CSS below */
h1{
  font-size: 62px;
}

img{
  margin-bottom: 20px;
}

div {
  padding:15px
}

#main-footer {margin-top: 40px}

#main-content{
  background-color: ivory
}
index.html 
<!DOCTYPE html>
<html>
  <head>
    <title>Basic Selectors Challenge</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <h1>Lake Tahoe, California</h1>
      <img src="mtn-landscape.jpg" alt="foggy mountains">
    </header>
    <div id ="main-content">
      <h2>Journey Through the Sierra Nevada Mountains</h2>
      <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>
    </div>
    <footer id= "main-footer">
      All rights reserved to the state of California.
    </footer>
  </body>
</html>
jl21591
jl21591
7,214 Points
jl21591
jl21591
7,214 Points

Is this a glitch. Need some help.

2 Answers

martinjones1
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
martinjones1
Front End Web Development Techdegree Graduate 44,824 Points
martinjones1
.a{fill-rule:evenodd;}techdegree seal-36
martinjones1
Front End Web Development Techdegree Graduate 44,824 Points

Close, the challenge is to apply a class of "main-content" not an id.

So you just need to update your code accordingly.

.main-content{
  background-color: ivory
}

    <div class="main-content">
      <h2>Journey Through the Sierra Nevada Mountains</h2>
      <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>
    </div>
Micol Bellantoni
Micol Bellantoni
498 Points
Micol Bellantoni
Micol Bellantoni
498 Points

Hi,instead of using an Id you need to use a class in your html code. Html <div class=“main-content ”></div> You have to select your Id class with a dot, and rember to close it with a ;(you didn’t closed also your div selector and your main-footer I’d) Css .main-content { background-color:ivory; }