You should add the flavor class to the <p></p> element

HTML-CSS
1

I have added the flavor class to the <p></p> element?!

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>
<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" type="text/css" />
</head>
<body>
  <div class="menu">
    <header>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
    </header>
    <main>
      <section>
        <h2>Coffee</h2>
        <article>
          <p> <flavor flavor="FrenchVanilla"> 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;
}

  **Your browser information:**

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

Challenge: Step 33

Link to the challenge:

2

so why isn’t this code working?

3

classes are assigned like this <elementname class="classname"> and you have to also define it in css file like this .classname {property: value}. sometimes insructions ask you to assign a class to element only in one lesson and to define it in css file in next lesson

4

you have to assign flavor class to p element

5 
      <h1`><p`> <`div c`lass="`Flavor"> French Vanilla <`/p><`/h1>

and yet I still have to assign the flavor class to the p element,
the lesson suggests I don’t edit the css. file yet, I don’t know the name of the ‘text-`align’ yet, and here is the solution without all that.

French Vanilla - 3.00

6

you have to assign flavor class to p like this <p class="flavor">

7

that’s within the tag, not the element?

8

yes it should be within the opening tag

9

Ah so element’s can also be a selector too?

10

one is type selector which is like this for example for p <p> {text-align} it will target all paragraph elements to center its text. and other is class selector which is like this for example for flavor .flavor {text-align: center}, now this class when assigned to any element for example for p <p class="flavor" then text will be assigned for only those paragraph elements which are assigned flavor class. Hope you understand my point

11

Thanks, I will just go through this from scratch tomorrow and hopefully it will start to make more sense,
I think I have a different understanding of the phrase ‘selector’, I think I may be confusing it with the text in the " " - since <div> is just an element that creates a box/division and {`} seems to be the parameters of the selector(?maybe)

12

a selector is a css term for targeting a particular element if you are targeting element itself then its type selector and if you are targeting element(s) which are assigned a class then you will target the class not elements its called a class selector or id selector if the element has id instead of a class

13

ok, and the text (question) in <p class="(question)"`> is what is being selected by css? .question {parameters}

14

exactly, css will search class named .question then it will apply the properties of that class to the element which is assigned this class

1 Like
15

amazing, thanks, your a lifesaver!

17

Thank you so much, I was stuck on this.

18

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