Learn Basic CSS by Building a Cafe Menu - Step 52

Tell us what’s happening:
Describe your issue in detail here.
adding desert class name to the selector

   **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">
     <header>
       <h1>CAMPER CAFE</h1>
       <p>Est. 2020</p>
     </header>
     <main>
       <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;
}

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

.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/103.0.0.0 Safari/537.36

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

Link to the challenge:

Hey there…
Please describe your problem next time for people to better understand what’s going on…

This is the challenge: Step 52
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.

Since the flavor class selector already has the properties you want, just add the dessert class name to it.

Your code on this step is not entirely wrong…This type of selector is called a group selector…It gives two or more selectors be it elements and classes or a mixture the same properties…They are separated by a comma…

The syntax goes as follows:
h1, h2, span {
}

In your case you’ll use the two classes…
Your code needs only a comma between the two class selectors…

Hope this helps…

1 Like

i was able to do it. got your reply late

Ohh…Sorry for the late replay…glad you were able to do it…

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