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 Alina Kelly
Alina Kelly
1,167 Points

Challenge Task 3 of 6 of CSS basics In the HTML file, give the h1 element the class main-heading.

Challenge Task 3 of 6

In the HTML file, give the h1 element the class main-heading.

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-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>
style.css 
/* Complete the challenge by writing CSS below */
.main-header {
    background-color: orange;
}
Kai Nightmode
Kai Nightmode
37,045 Points

The h1 element is the one you'll want to add the class to. Also check your CSS to make sure you are using the right class name from the question (hint: main-heading).

2 Answers

Tobias Helmrich
Tobias Helmrich
31,602 Points
Tobias Helmrich
Tobias Helmrich
31,602 Points

Hey Alina,

Daniel already gave you the correct answer that you'll have to add the class to the h1 element like so

<h1 class="main-heading">Lake Tahoe, California</h1>

However there's one tip I'd like to add: You passed the first task as it's okay to do so but try not to add whitespace between the attribute and its value as this is considered a bad practice.

So try writing

<header class="main-header">

instead of

<header class= "main-header">

Good luck! :)

Alina Kelly
Alina Kelly
1,167 Points

& thanks Tobias! : )

Damien Watson
Damien Watson
27,419 Points
Damien Watson
Damien Watson
27,419 Points

Hi Alina,

Task 3 asks to give the class 'main-heading' to the h1 element like below. Your CSS is correct as this is what is asked in Task 2 (add style in css for .main-header').

    <header class="main-header">
      <span>Journey through the Sierra Nevada Mountains</span>
      <h1 class="main-heading">Lake Tahoe, California</h1>
    </header>
Alina Kelly
Alina Kelly
1,167 Points

Thanks Damien!