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 Don Mabry
Don Mabry
3,679 Points

targeting class main-heading

its asking me to target the heading with a class selector and I wrote out the code .main-header { font-size 72px; }

inside of the h1 tag what am I doing wrong?

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 id= "top" 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>
      <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;
}
Tushar Singh
Tushar Singh
Courses Plus Student 8,692 Points
Tushar Singh
Tushar Singh
Courses Plus Student 8,692 Points

change the font size of main-heading() not the main-header.

<!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>

/* Complete the challenge by writing CSS below */
.main-header {
  background-color: orange;
}
.main-heading {  
  font-size: 72px;  /* font-size change*/
}

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

3 Answers

Angela Visnesky
Angela Visnesky
20,927 Points
Angela Visnesky
Angela Visnesky
20,927 Points

Hi Don, You have a space that shouldn't be there.

<header id= "top" class= "main-header">

It should read:

<header id="top" class="main-header">

The challenges can be really picky. I hope this helps!

Don Mabry
Don Mabry
3,679 Points
Don Mabry
Don Mabry
3,679 Points

This is not my problem that part of the code was correct my problem is where and how do I set the heading to a class selector and set a font to 72px?

LaToya Legemah
LaToya Legemah
12,600 Points
LaToya Legemah
LaToya Legemah
12,600 Points

Tushar Singh is correct I think. It looks like you are changing .main-header instead of .main-heading

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi Don,

Just picked up your answer request.

From the code above it does look like you have a couple of spaces in the HTML that would cause errors even if you had the selector correct however as mentioned above the way to set the font size for your H1 with the class main-heading is as follows:

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

If you already had this and it was not working the reason will be the spaces in the HTML.

Hope this helps and sorry for the delay in getting back to you.

Craig