Learn Basic CSS by Building a Cafe Menu - Step 32

Am I understanding a class selector properly?

<!-- 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>French Vanilla</p>
            <p>3.00</p>.flavor {
  french vanilla 
}

          </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/106.0.0.0 Safari/537.36

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

Link to the challenge:

Hi! Can you be a little more specific in your question? Ultimately I would say yes since you use .ClassName to target in CSS.

In this step, you should put a class with name “flavor” in your opening ‘p’ tag for “French Vanilla”.

<p>.flavor } French Vanilla }</p> <p>3.00</p>

Like this?

Opening ‘p’ tag: class=“name of your class” then put your text, and add a closing ‘a’ tag. No curly braces in this step.

recall: you have learned how to add class attributes before when you wrote this line of code.


> Blockquote

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

I feel like im not understanding this step.  Is that closer?

Please read instruction again. ‘<’ p class=" name"‘>’ Remember we give you just an example of how to resolve your problem not the final solution.

1 Like

As the other person who posted just said, you need the class inside the p element. Not in a div.

I was stuck here too but its simple

you just add the class=“name” inside the first <‘p’>
you only use the " . " for the styles.css file

2 Likes

I tried to add flavor=“french vanilla” in every way possible :tired_face:

If you have a question about a specific challenge as it relates to your written code for that challenge, just click the Ask for Help button located on the challenge. It will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

Ps. Look at how you added the class menu to the div element.
You should add the class flavor to the p element the same way.