Learn Basic CSS by Building a Cafe Menu - Step 32

I don’t know how else to add the class to my P element. tried to look up some help online but nothing worked.

Your code so far

<!-- 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>

<!-- User Editable Region -->

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

<!-- User Editable Region -->

          </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; rv:109.0) Gecko/20100101 Firefox/117.0

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

Link to the challenge:

Look at how you added the menu class to the div that wraps the main element:

<div class="menu">

You would add the flavor class to the p element the same way.

so I would have to write this?
div flavor=“French Vanilla”

First of all, you want to add the flavor class to the p element, so you would not use a div, you would add it to the existing p element.

Second, look at how you added the menu class to that div. You set class equal to the name of the class you wanted to use (which was “menu” for the div). You want to use the class name flavor for the p element.

how do I write a code in this text? I want to show what I’m typing in full but in doesn’t display. Thanks for all the help

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

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

this is what I have. I am still a little confused

When you added the menu class to the div did you add it as a separate element using < and >? Look again at how you did it:

<div class="menu">

I tried to add it without the <> but it just displays on the webpage with the french vanilla. I tried doing it as a separate line but it needs to be within the p element.

Let’s look at the div again:

<div class="menu">

Explain in words, not code, what you did to add the “menu” class to that div.

I set the class value to menu

Where did you do this?

In a line below the beginning of the body element

And what else was on that line below the beginning of the body element?

ok so I figured out what is was.

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

can you explain to me why I have to leave the first p open?

1 Like

Good job figuring it out.

The p element has an opening p tag and closing p tag because you can put stuff inside of it (such as text). Attributes go on the opening tag of the element, so you added the class attribute with the value “flavor” to the opening p tag. That’s just how you add attributes to elements.

I hope that answered your question. If not, can you be more specific about what you don’t understand.

1 Like

So, in a way you are saying that for every opening tag p we do not need to add /?

No, that is not what I am saying. The p element always needs both an opening and closing tag because you can put stuff inside of it. The / goes on the closing tag.

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