---
id: 614206033d366c090ca7dd42
title: Hatua ya 17
challengeType: 0
dashedName: step-17
---

# --description--

Typeface ina jukumu muhimu katika ufikivu wa ukurasa. Baadhi ya fonti ni rahisi kusoma kuliko zingine, na hii ni kweli hasa kwenye skrini zenye mwonekano wa chini.

Badilisha fonti ya vipengee vya `h1` na `h2` hadi `Verdana`, na utumie fonti nyingine iliyo salama kwenye mtandao katika familia ya sans-serif kama njia mbadala.

Pia, ongeza `border-bottom` ya `4px solid #dfdfe2` kwa vipengele vya `h2` ili kufanya sehemu ziwe tofauti.

# --hints--

Unapaswa kutumia kichaguzi cha vipengele vingi ili kulenga vipengele vya `h1` na `h2`.

```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
assert.exists(gs('h1, h2') || gs('h2, h1'));
```

Unapaswa kuweka thamani ya kwanza ya `font-family` kuwa `Verdana`.

```js
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
const style = gs('h1, h2') || gs('h2, h1');
assert.include(style?.fontFamily, 'Verdana');
```

Unapaswa kuweka thamani ya pili ya kipengele cha `font-family` kwa sans-serif nyingine, fonti salama ya wavuti. _Kidokezo: Ningechagua Tahoma_.

```js
// Acceptable fonts: Arial, sans-serif, Helvetica, Tahoma, Trebuchet MS.
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
const style = gs('h1, h2') || gs('h2, h1');
assert.match(style?.fontFamily, /(Tahoma)|(Arial)|(sans-serif)|(Helvetica)|(Trebuchet MS)/);
```

Unapaswa kutumia kichaguzi cha `h2` ili kulenga vipengele vya `h2`.

```js
assert.exists(new __helpers.CSSHelp(document).getStyle('h2'));
```

Unapaswa kuipa`h2` `border-bottom` ya `4px solid #dfdfe2`.

```js
assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.borderBottom, '4px solid rgb(223, 223, 226)');
```

# --seed--

## --seed-contents--

```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>

```

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

--fcc-editable-region--

--fcc-editable-region--

```
