Learn Basic CSS by Building a Cafe Menu - Step 32

HTML-CSS
1

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:

2

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

3

In this step, you should put a class with name ā€œflavorā€ in your opening ā€˜pā€™ tag for ā€œFrench Vanillaā€.

4

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

Like this?

5

Opening ā€˜pā€™ tag: class=ā€œname of your classā€ then put your text, and add a closing ā€˜aā€™ tag. No curly braces in this step.

1 Like
6

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

7 

> Blockquote

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

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

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
9

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

10

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

4 Likes
11

I tried to add flavor=ā€œfrench vanillaā€ in every way possible :tired_face:

12

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.

1 Like
13 
[Mod edit: solution deleted]
14

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original posterā€™s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

1 Like
16

This one was confusing to me too, because in the instructions it doesnā€™t specify to add class as an attribute. In this instance the attribute to P element is class=ā€œflavorā€.
so, just add the attribute class=ā€œflavorā€ to the opening P tag.
such as; < p > class=ā€œflavorā€ > French Vanilla </ p >
Hopefully this helps anyone that gets stuck on this step.

17

thank you! The instructions were a bit confusing. I donā€™t always remember what I did before the 1st time around

18

French Vanilla

If anyone is stuck, this should help. It worked

19

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