Learn Basic CSS by Building a Cafe Menu - Step 33

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
how will i place the flavor 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">
      <main>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
        <section>
          <h2>Coffee</h2>
          <article>
            <p class="flavor">French Vanilla</p>
            <p>3.00</p>
          </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;
}


/* User Editable Region */

flavor {
  text-align: left;
}

/* User Editable Region */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36 Edg/92.0.902.67

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

Link to the challenge:

2

Hey!

Selectors are a way for you to “select” a particular element in your HTML code and style it according to your needs. There are multiple types of selectors available in CSS, if you want to learn more about them, here’s a helpful article:

As for your question, There’s no such thing as a flavor selector, what you need to use is a class selector. The above article would help you a lot with the challenge.

Hope this helps! :smile:

3

explain more i dont understand

4

Do you remember the flavor class that you added in the HTML section? It would have look something like this: <element class="flavor">*content*</element>. The purpose of this is to give the element another name to be called by (the name being flavor). This is what the class attribute does (the the id attribute does the same, except that unlike the class attribute, the id attribute can only be used once.)

More about the class attribute: HTML Classes - The Class Attribute

Now that we have established that , as you can see in the article above; when you are styling an HTML document, an element can be targeted and styled by calling its name. So the name could be the name of the element itself(h1) or the name of its class flavor.

What this step wants you to do is to target that specific p element, not by calling the name of the element, but by calling the name of its class instead which is flavor. To refer to this class in a CSS file, we use selectors: i.e. we select/say the name of an element. After selecting/saying the name of that element, we can apply styles to that specific element. If you want to select/call an element that also has the class of manju, you could do so by including the name of the element itself in the CSS file (element { }), or you could select/call the class instead (.manju {}) .

The latter is what the instructions is asking you to do. So select/call the element with the class of flavor and style that specific element.

Take a look here for a more detailed intro to selectors: CSS selectors - Learn web development | MDN

2 Likes