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 Basic Selectors ID and Class Selectors

Posted by ROBERT BUTLER
ROBERT BUTLER
2,010 Points

I am stuck on this.

Give the header element a class attribute. Then, set the class value to main-header.

index.html 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Developer Diane: Resume</title>
  <link rel="stylesheet" href="page.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
    <header>
      <div>
        <h1>Developer Diane: Resume</h1>
        <address>
          <p>website: developerdiane.com</p>
          <p>email: diane@developerdiane.com</p>
        </address>
        <img src="developer-diane.jpg" alt="Developer Diane coding on her laptop.">
      </div>
    </header>          
    <section>
      <h2>Experience</h2>
      <ul>
        <li>
          <h3>Super Web Design Shop</h3>
          <p>Junior Developer</p>
          <p class="date special">February 2020-present</p>
        </li>
        <li>
          <h3>Pretty Good Websites, Inc.</h3>
          <p>Web Development Intern</p>
          <p>July 2019-January 2020</p>
        </li>
      </ul>
    </section>
    <footer>Ā©2020 Developer Diane.</footer>
  </main>
</body>
</html>
style.css 
/* Complete the challenge by writing CSS below */

3 Answers

ROBERT BUTLER
ROBERT BUTLER
2,010 Points
ROBERT BUTLER
ROBERT BUTLER
2,010 Points

<header class="main-header"></header>

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

You've correctly assigned the class attribute to the <header> element.

Now you have to switch to the CSS tab and write your class selector.

Remember that for classes in css you need the dot (.) selector followed by the name of the class which is different from ID selectors where you use the # key.

ROBERT BUTLER
ROBERT BUTLER
2,010 Points

Do you mean like this?

<.header class="main-header"></header>

or .<header class = "main-header"></header>

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

I just meant that this is the part where you write the CSS that selects the .main-header class and changes the styling accordingly.

So the selector you need for your CSS is 

.main-header  {

}

Good luck! :-)