CSS CSS Basics (2014) Basic Selectors ID and Class Selectors

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;

Im lost on this. I will try again tomorrow.

4 Answers

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>

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

Kris, thank you for your help.

Dylan, thank you for your help.

Doug.