Learn Basic CSS by Building a Cafe Menu - Step 32

HTML-CSS
1

Hi , please…how do I add a class selector to my P element ?

<!-- 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>French Vanilla
              <div.class=flavour>
            </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 (iPhone; CPU iPhone OS 15_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/122.0.6261.89 Mobile/15E148 Safari/604.1

Challenge Information:

Learn Basic CSS by Building a Cafe Menu - Step 32

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

3

Hi! You’re almost done it.
Syntax is

<p class="value">text</p>

Make sure to add it to your paragraph, do not create a div

1 Like
4

Remove that div element. You need class attribute with the value “flavor” within <p> element .
Example
<p attribute="value"> .

1 Like
5

Thank you for your help , my code works.
Here’s what it looks like:

French Vanilla

6

Your welcome. Keep it up, happy Coding!

1 Like
7

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