Learn Accessibility by Building a Quiz - Step 17

HTML-CSS
1

Tell us what’s happening:
Error message I keep getting is: You should use a multiple element selector to target the h1 and h2 elements.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
    <title>Accessibility Quiz</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
      <h1>HTML/CSS Quiz</h1>
      <nav>
        <ul>
          <li><a>INFO</a></li>
          <li><a>HTML</a></li>
          <li><a>CSS</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
        <section role="region" aria-labelledby="student-info">
          <h2 id="student-info">Student Info</h2>
        </section>
        <section role="region" aria-labelledby="html-questions">
          <h2 id="html-questions">HTML</h2>
        </section>
        <section role="region" aria-labelledby="css-questions">
          <h2 id="css-questions">CSS</h2>
        </section>
      </form>
    </main>
  </body>
</html>


/* file: styles.css */
body {
  background: #f5f6f7;
  color: #1b1b32;
  font-family: Helvetica;
  margin: 0;
}

header {
  width: 100%;
  height: 50px;
  background-color: #1b1b32;
  display: flex;
}

#logo {
  width: max(100px, 18vw);
  background-color: #0a0a23;
  aspect-ratio: 35 / 4;
  padding: 0.4rem;
}

h1 {
  color: #f1be32;
  font-size: min(5vw, 1.2em);
}

nav {
  width: 50%;
  max-width: 300px;
  height: 50px;
}

nav > ul {
  display: flex;
  justify-content: space-evenly;
}
h1 > h2 {
  font-family: Verdana Tahoma;
  border-bottom: 4px solid #dfdfe3;
  }

/* User Editable Region */

h1 > h2 {
  font-family: Vernada Time Roman;
  border-bottom: 4px solid #dfdfe2;
}

/* User Editable Region */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Challenge: Learn Accessibility by Building a Quiz - Step 17

Link to the challenge:

2

> selects direct children. You’re looking for the comma , which just like in English, denotes multiple elements!

3

In addition to the above, you shouldn’t have two of them. You only need one selector that targets both h1 and h2

4

I am still getting the same error message: You should use an h2 element selector to target the h2 elements.

What am I missing?

h1 , h2 {
   font-family: Verdana, Tacoma sans-serif;
   border-bottom:  4px solid #dfdfe2;
}
5

That style should only be for the h2 selector not both as the directions say

Also, add a border-bottom of 4px solid #dfdfe2 to h2 elements to make the sections distinct.

It doesnt say this style should be for the h1 as well. So you need some style that is for both h1 and h2.

Then you have this style thats only for the h2

6

I got it! I am soo excited about learning this to the point of adding things to the content. Let me take my time… :joy:

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.