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 Douglas Middleton
Douglas Middleton
1,233 Points

Where are the threehouse instructors?

I need help?

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 class="main-heading">
      <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>
style.css 
/* Complete the challenge by writing CSS below */
.main-heading {
  background-color: orange;
  font-size: 72px;
Douglas Middleton
Douglas Middleton
1,233 Points

Im lost on this. I will try again tomorrow.

4 Answers

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,972 Points
KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,972 Points

There is a header and a heading. You seem to be confusing the two. These have their own individual tags. In this challenge you will be adding a class to and styling both.

Header uses the tags <header></header>

(main) Heading uses the tags <h1></h1>

Dylan Glover
Dylan Glover
2,537 Points
Dylan Glover
Dylan Glover
2,537 Points

Hey Douglas,

you have to make sure to close off tags in CSS with closing curly brackets. In the challenge they want you to add a class of main-header to the <header> for step 1, main-heading to the <h1> for step 3, and and ID of main-content to the <div> for step 5. That would look like this in your HTML :

<!DOCTYPE html>
<html>
  <head>
    <title>Lake Tahoe</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body> 
    <header class="main-header">
      <span>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 id="main-content">
      <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>

If you check the <header>, <h1>, and <div> elements you can see where these classes and ids are declared. For the CSS portions in questions 2, 4, and 6 you will be styling all of these respective elements, that will look like this. 

/* Complete the challenge by writing CSS below */
.main-header {
  background-color: orange;
}

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

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

Hope this helps, make sure to close off all tags in CSS with curly brackets and declare the right classes and you should be good to go

Dylan

Douglas Middleton
Douglas Middleton
1,233 Points
Douglas Middleton
Douglas Middleton
1,233 Points

Kris, thank you for your help.

Douglas Middleton
Douglas Middleton
1,233 Points
Douglas Middleton
Douglas Middleton
1,233 Points

Dylan, thank you for your help.

Doug.