Hi, please help with Step 59 (css)

HTML-CSS
1

It is a bit boring for all the text to have the same font-family. You can still have the majority of the text sans-serif and make

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Cafe Menu</title>
  <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div class="menu">
    <header>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
    </header>
    <main>
      <section>
        <h2>Coffee</h2>
        <article class="item">
          <p class="flavor">French Vanilla</p><p class="price">3.00</p>
        </article>
        <article class="item">
          <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
        </article>
        <article class="item">
          <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
        </article>
        <article class="item">
          <p class="flavor">Hazelnut</p><p class="price">4.00</p>
        </article>
        <article class="item">
          <p class="flavor">Mocha</p><p class="price">4.50</p>
        </article>
      </section>
      <section>
        <h2>Desserts</h2>
        <article class="item">
          <p class="dessert">Donut</p><p class="price">1.50</p>
        </article>
        <article class="item">
          <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
        </article>
        <article class="item">
          <p class="dessert">Cheesecake</p><p class="price">3.00</p>
        </article>
        <article class="item">
          <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
        </article>
      </section>
    </main>
  </div>
</body>
<html>

/* file: styles.css */
body {
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
}

h1, h2, p {
text-align: center;
}

.menu {
width: 80%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
padding: 20px;
max-width: 500px;
}

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


.item p {
display: inline-block;
}

.flavor, .dessert {
text-align: left;
width: 75%;
}

.price {
text-align: right;
width: 25%
}

  **Your browser information:**

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

Challenge: Step 59

Link to the challenge:

2

To change a font style from sans serif or from any style to another you need to use a CSS property called font-family. As you can see in the CSS section above with the body font-family being set to sans serif.

body {
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
}

You just need to select multiple elements which is the h1 and h2 element (like also shown in the CSS section above)

h1, h2, p {
  text-align: center;
}

And change the font-family to “Impact”.

1 Like
3

Capture111
after I checked my code, its whrite me that "You should set the font-family to Impact . "
How I can do this?

4

Inside the curly braces you need to add the property and the value name like this shown in the example.
font-family: sans-serif;
Just change the font-family name to Impact.

5

Screenshot 2022-06-19 151253

I´ve already tried this, but the problem still there…

6

In your code you have written impact: sans-serif; which is incorrect because in order to change the font-family you need to use the property font-family: then the name of the family that you want to change it to in this case it is Impact. Just pay attention to the lowercase and uppercase when setting the font family name to a different one because otherwise it will not read it as such. And if your font family name has space in between words then make sure to use quotation marks ("" or ‘’). So the font-family is the property name and the Impact (which is the name of the font family that you want to set it to) is the value.

7

Screenshot 2022-06-19 16234122

ooh, it was so easy… but Im a newbie, who is trying to become a programmer)

thank you S.Roy)

1 Like
8

No worries, we all go through this.
Good Luck on the path.

1 Like
9

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