Learn Basic CSS by Building a Cafe Menu - Step 51

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
Something does not look right. You added the correct class attribute value to the p element with Donut as its text, but you have not defined a selector for it.

The CSS rule for the flavor class already sets the properties you want. Add the dessert class as an additional selector for this CSS rule.
You should add the .dessert selector to your .flavor selector.

Could someone please tell me where I went wrong? And please clarify what I did wrong. Thank you in advance for your assistance.

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 class="item">
            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
          </article>
          <article class="item">
            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
          </article>
          <article class="item">
            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
          </article>
          <article class="item">
            <p class="flavor">Mocha</p><p class="price">4.50</p>
          </article>
        </section>
        <section>
          <h2>Desserts</h2>
          <article class="item">
            <p class="dessert">Donut</p><p class="price">1.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;
}

.item p {
  display: inline-block;
}


/* User Editable Region */

.flavor {
  text-align: left;
  width: 75%;
}
.dessert{
  text-align: left;
  width: 75%;
}


/* User Editable Region */


.price {
  text-align: right;
  width: 25%
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36 OPR/102.0.0.0

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

Link to the challenge:

2

Hello Mustafa, I hope you are great.
Here you are required to select multiple classes and use them as a single selector. To select them, you separate the two classes using a comma then the property and values follow. Check the example below it will guide you through.

.class1, .class2{
property: value;
}
2 Likes
3 
.flavor, .dessert {
  text-align: left;
  width: 75%;
}

> Blockquote
Thanks, Bro I will solve this already, after the post, I will try again that's time I will find the solutions. Thank you so much for helping me
4

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