Learn Basic CSS by Building a Cafe Menu - Step 33

HTML-CSS
1

Tell us what’s happening:
I don’t understand how im supposed to put a class inside
ppl keep telling me that i should put

French Vanilla

as a class but i don’t understand why
Can someone tell me why my code isn’t working and why the following code is “class” ?

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" />
    <title>Cafe Menu</title>
    <link href="styles.css" rel="stylesheet"/>
  </head>
  <body>
    <div class="menu">
      <main>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
        <section>
          <h2>Coffee</h2>
          <article>
            <p class="flavor">French Vanilla</p>
            <p>3.00</p>
          </article>
          <article>
            <p>Caramel Macchiato</p>
            <p>3.75</p>
          </article>
          <article>
            <p>Pumpkin Spice</p>
            <p>3.50</p>
          </article>
          <article>
            <p>Hazelnut</p>
            <p>4.00</p>
          </article>
          <article>
            <p>Mocha</p>
            <p>4.50</p>
          </article>
        </section>
      </main>
    </div>
  </body>
</html>

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

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

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
}


/* User Editable Region */

<p class="flavor">French Vanilla</p>
p {
  text-align: left;
}

/* User Editable Region */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Challenge: Learn Basic CSS by Building a Cafe Menu - Step 33

Link to the challenge:

2

Hello!

It wants us to use the .flavor selector to make the property and value code.

You do have the correct css style. Only it should be the class flavor selector. Remember class selectors have a dot before the name.
Suggestion: Reset the step and only enter the code as you have it in the quote, but put the flavor class selector in place of the p selector.

3

Can use this as an example and its already in your code. This is menu as a class. If you want to use a class in css then the .dot has to be in front of the name. Also the name has to be in your html. So in your html you have class="menu" somewhere, and the way to target that class in css is by using .menu

You are trying to write html in your css and thats not something you can do. You need to follow the menu example and make a flavor class

4

this is also very helpful thanks

1 Like