CSS CSS Basics Basic Selectors ID and Class Selectors

Ernest Booth
Ernest Booth
5,622 Points

class attribute for h1 is not working properly

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 class="main-header">
      <div>
        <h1 class="main-header">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 */
header.main-header {
  background-color: orange;
}

First of all, you've given both your heading and your h1 element the same class. the h1 element should be called .main-heading.

In your CSS you only need to write .main-header as this now only applies to a single element.

:)

1 Answer

Andrew Cooper
Andrew Cooper
956 Points

Hi Ernst, sorry I cannot help you with your query, I'm a newbie, only been with Treehouse for just over a week. What is am interested in is how you managed to create the screen shots for your html and css code? Cheers