Learn Accessibility by Building a Quiz - Step 17

HTML-CSS
1

In the CSS part of my code I have no idea what I’m doing wrong for the h1 and h2 selectors, basically I’m having trouble with understanding why the code in those selectors aren’t working?
Describe your issue in detail here.

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{font-family: Verdana, Geneva, fallback, sans-serif;
 
 
 }
 
 
h2 {font-family: Verdana, Geneva, fallback sans-serif; 
border-bottom: 4px solid #dfdfe2;}

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS aarch64 14989.107.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

Challenge: Learn Accessibility by Building a Quiz - Step 17

Link to the challenge:

2

Hello,

I tryed your code and got this:

Hint:
You should use a multiple element selector to target the h1 and h2 elements.

To use multiple element selector you need a comma. Need figure out what their have in common and put together separate with a , .

Ex.: To use multiple selector with <h2> and <p> :

h2, p { what they have in common... }

Good studies!

3

‘fallback’ is not supposed to be there. For both h elements add family property as you did (without the ‘fallback’ word). And then, add another h2 with border-bottom property.