Learn Basic CSS by Building a Cafe Menu - Step 51 what mistake I am doing tell and solve it too

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

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

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

Link to the challenge:

2

Add the dessert class as an additional selector for this CSS rule.

You are intended to add an additional class that inherits the same rules of .flavor. What you have done is add an entirely new selector and rules.

You can add multiple selectors under the same rulset by separating them with commas like so:

.classOne, .classTwo {
    background-color: red;
}

This is how you will apply the same styling to .flavor and .dessert. Using multiple selectors in this way prevents us from writing redundant CSS.

You can apply this to any type of selector by the way. Example:

#some-id, .some-class, input[type="text"], a {
      font-weight: 800;
}
2 Likes
3

Hello!

@gabei has provided excellent guidance.

Just to add a bit to it; if you look within your previous code

you have used a multiple selector in the past.

This step does confuse many people.

Happy coding! :slight_smile:

1 Like
4

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