freeCodeCamp/curriculum/challenges/german/14-responsive-web-design-22/learn-typography-by-buildin.../615f3cafd794015aa9547a6d.md

1.4 KiB

id title challengeType dashedName
615f3cafd794015aa9547a6d Step 12 0 step-12

--description--

Remember that the use of h1, h2, and similar tags determine the semantic structure of your HTML. However, you can adjust the CSS of these elements to control the visual flow and hierarchy.

Create an h1 rule and set the font-weight property to 800. This will make your h1 text bolder.

--hints--

You should create an h1 selector.

assert(new __helpers.CSSHelp(document).getStyle('h1'));

Your h1 selector should have a font-weight property set to 800.

assert(new __helpers.CSSHelp(document).getStyle('h1')?.fontWeight === '800');

--seed--

--seed-contents--

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Nutrition Label</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
    <link href="./styles.css" rel="stylesheet">
  </head>
  <body>
    <div class="label">
      <h1>Nutrition Facts</h1>
      <p>8 servings per container</p>
      <p>Serving size 2/3 cup (55g)</p>
    </div>
  </body>
</html>
* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  font-family: 'Open Sans', sans-serif;
}

.label {
  border: 2px solid black;
  width: 270px;
  margin: 20px auto;
  padding: 0 7px;
}

--fcc-editable-region--

--fcc-editable-region--