CSS CSS Basics Basic Selectors ID and Class Selectors

ROBERT BUTLER
ROBERT BUTLER
2,008 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,008 Points

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

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 89,652 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,008 Points

Do you mean like this?

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

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

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 89,652 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! :-)