Learn Basic CSS by Building a Cafe Menu - Step 33

I should add the flavor class to myp element.

<!-- 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">
      <header>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
      </header>
      <main>
        <section>
          <h2>Coffee</h2>
          <article>
          <flavor id="French Vanilla">French Vanilla</flavor>
           <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;
}

Your browser information:

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

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

Link to the challenge:

are you unsure how to add a class?
It’s just another attribute.
it is added to the opening tag of an html element.

1 Like

thank you for the help but now this is my code but it dont really work

<div class="flavor" French Vanilla>
       <p>3.00</p>
       </div>

ooh yes, I see the problem now.
When you did this code, did you check your preview area?
Do you still see the words “French Vanilla” or have they disappeared?

Hint: they probably disappeared because you put them inside the tag instead of where they used to be?

1 Like

sry but i still dont get it

if you click on restart step you will see the old code looked like this (top row is old, bottom row is your code)
<p class="flavor">French Vanilla</p>
<div class="flavor" French Vanilla>

do you see the old code here had “French Vanilla” nested inside the p tags?

So in addition to change the p to a div (not sure why you did that as it is not required),
you also moved the angled bracket > to the wrong position so essentially it is treating the word “French” and “Vanilla” like an HTML attribute, instead of just plain text (because they are located inside the div opening tag now… not sure if you understand this).

I would just click on Restart Step and try this exercise again.
Only add code this time, do not delete or transform any code …

1 Like

We all thank you for making the confusing less confusing.

1 Like

this was a bit challenging for me as well so i hope you figured it out if not an easier hint: is like he said you don’t need to define the div attribute but rather the class attribute only and assign flavor as it’s value.

side note: i think the fact that he asked you to scroll up and referenced the class code we used before is what confused us into using div as an attribute