Please explain class naming to me more

HTML-CSS
#1

Tell us what’s happening:
Describe your issue in detail here.
i find it difficult to add class name flavor to french vanilla p element.

  **Your code so far**

/* file: index.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>
          <flavor class="value">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/102.0.5005.63 Safari/537.36 Edg/102.0.1245.30

Challenge: Step 33

Link to the challenge:

#2
#3

help me out!!
The flavors and prices are currently stacked on top of each other and centered with their respective p elements. It would be nice if the flavor was on the left and the price was on the right.

Add the class name flavor to the French Vanilla p element.

type o <element class="value">French Vanilla</element>
            <p>3.00</p>r paste code here
 </article>
          <article>
            <p>Caramel Macchiato</p>
            <p>3.75</p>
          </article>
          <article>
#4

It looks to me that you need to add class="flavor" inside the p tag. If it’s the French Vanilla p element you want to add it to, then it will look like this:

<p class="flavor">3.00</p>

In regards to getting the flavor name on the left and the price on the right, you could try adding the price in the same p element as the flavor, but wrap the price in a span. You can then add a class that applies styles just to the price. Here’s an example of how that would look:

<p>Caramel Macchiato<span class="className">3.75</span></p>

Take a little time to fiddle around with this stuff. And remember, have some patience, you may not understand something at the time of learning it, but you will as you keep moving forward. Keep going!!

#5

Learn Basic CSS by Building a Cafe Menu: Step 33 | freeCodeCamp.org

#6

Please tell us what is your question.

#7

The flavors and prices are currently stacked on top of each other and centered with their respective p elements. It would be nice if the flavor was on the left and the price was on the right.

Add the class name flavor to the French Vanilla p element.

<p>French Vanilla<span class="flavor">3.00</p>
          </article>

its still telling me to add flavor class to the p element

#8

wkith this you have added a class named value, but the challenge wants a different class name for that element. Which name is that?

#9

the name is french vanilla

#10

take a look at this

<p flavor class="French Vanilla"</p>
          </article>
#11

no, it’s not, read again the instructions, what class should you add?

that’s also not valid html anymore

#12

i should add flavor class.

#13

how do you add a class of name flavor if this class="value" is the way to add a class named value?

#14

do you mean like this

<p flavor="French Vanilla">3.00</p>
1 Like
#15

Here’s the general idea of what the code should look like:

<tagName>Your text goes here</tagName>

To add a class, you will always add class="INSERT" inside the tag. So it would look like this.

<tagName class="INSERT">Your text goes here</tagName>

You write the name of your class where I’ve written "INSERT". So to add a class called flavor, you would add it like this.

<tagName class="flavor">Your text goes here</tagName>

And to add more than one class to the same element, you simply add a space between the names.

<tagName class="className1 className2">Your text goes here</tagName>

Read over this a good number of times to better understand how to use it.

#16

still no, you are making too many changes, you just have to add the class
reset the step, try from the beginning

class="value" add a class named value, does your code have anything in common with this?

#17

in the question i was told to separate the flavor from the price. now, how do i do that using only one class element?

#18

that will be for future steps, right now what you have to do is just this

Add the class name flavor to the French Vanilla p element.

#19 
<p class="flavor">French Vanilla  3.00</p>            

          </article>

Thank you so much. you have been of immense help to me.

1 Like
#20

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