Learn Accessibility by Building a Quiz - Step 17

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

Instructions say: Step 17

Typeface plays an important role in the accessibility of a page. Some fonts are easier to read than others, and this is especially true on low-resolution screens.

Change the font for both the h1 and h2 elements to Verdana, and use another web-safe font in the sans-serif family as a fallback.

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

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

I tried:

h1 h2 {
font-family: Verdana, sans-serif; /*also tried straight Tahoma and Arial */
}

h2{
border-bottom: 4px solid #dfdfe2;
}

ALSO TRIED:
h1 {
font-family: Verdana, sans-serif; /*also tried straight Tahoma and Arial */
}
h2{
font-family: Verdana, sans-serif; /*also tried straight Tahoma and Arial */

Test

Sorry, your code does not pass. Don’t give up.

Hint

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;
}


/* User Editable Region */

h1 h2 {
  font-family: Verdana, sans-serif;
}

h2 {
  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/112.0.0.0 Safari/537.36

Challenge: Learn Accessibility by Building a Quiz - Step 17

Link to the challenge:

2

Im on my phone so its hard to see everything, but you are misunderstanding on how to use multiple selectors. If you are going to target h1 and h2 there needs to be a comme between them

Example: h1, h2{
Style here
}

Using this means something different.
h1 h2{
Style here
}

Hopefully someone can come behind me and correct the rest

3

hello and welcome to fcc forum :slight_smile:

  • you simply need to “separate” these css “selectors”

if you need more info about this, perhaps try looking into this topic, which focused on something similar Learn CSS Colors by Building a Set of Colored Markers - Step 78 - #3 by bappyasif

happy learning :slight_smile: