Confused how to add flavor class to p element?

Is there any issue with my code? I added .flavor to the <p> element and it just keeps responding "you should add the flavor class to the French Vanilla p element.

  **Your code so far**
\ file: <!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>
          <p.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>
<!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>
          <p.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: 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;
}
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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.41 Safari/537.36

Challenge: Step 33

Link to the challenge:

1 Like

Hello :wave:

Your issue lies with your “p.flavor” tag. The question asks you to turn the p element into a flavor class. In order for CSS to pickup on the class the P tag in question needs to have a class selector added to it. What you have done is put .flavor after p! .flavor is the code you would add into your CSS portion of the code.

I’m not going to write it out for you but try to recall how to write a class selector into your p element.

If you are unable to figure it out reply back to me and I will guide you further.

7 Likes

If you are still stuck I suggest going back to lesson 28 and reviewing how you completed that particular lesson.

5 Likes

Thank you, I was able to resolve the exercise with your comment.

1 Like

hey thank you for replying noticed it a while back with google!

I am so stuck on this one right now, please help.

After reading your comment I am still stuck, any other hints?

Can you please post your code so we can help.

Here is the question:
Add the class name flavor to the French Vanilla p element.

Here is my code:

French Vanilla

        <p>3.00</p>

French Vanilla

   <p>3.00</p>

Nevermind I found the youtube video lol

1 Like

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks.

```
Your code goes here
```

You can also use the “preformatted text” tool in the editor ( </> ) to add backticks around text.

2 Likes

Yea I was trying to figure out how to make the code come out cleaner, thanks Spark!

1 Like

what the link of the vid ?

Hey can you offer any recommendations, because i have tried all of your suggestions, and I cant pass this level
<p.flavour{
French Vanilla
}

2 Likes

just insert the class and the name inside the p opening tag . do not add the {}
class=****. I can’t give you the answer but this should help.

3 Likes

your guidance stands the best. thanks

2 Likes

remember syntax of classname you add nest in

like attribute class=“value”

Add a class attributes with the name flavor instead of a class name to the p opening tag.
I.e <.p class="name ">
Hope this helps.

1 Like

you misspelled the Flavor command. try the following it would be correct to add class=“flavor” to the p element