Learn Basic CSS by Building a Cafe Menu - Step 18

HTML-CSS
1

Tell us what’s happening:

Can someone explain to me what they’re asking? I don’t exactly understand what to do in this step.

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>
    <main>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
      <section>
        <h2>Coffee</h2>
      </section>
    </main>
  </body>
</html>

/* file: styles.css */

/* User Editable Region */

h1, h2, p {
  text-align: center;
 background-color: brown
}

/* User Editable Region */

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36

Challenge Information:

Learn Basic CSS by Building a Cafe Menu - Step 18

2

Right now you are setting the background color for the h1, h2 and p selectors to brown.

but the directions say to set the body selector to brown

once you fix that, then the tests will pass and you will see the background color for the whole page change to brown in the preview window

3

I got that part- how exactly do I do that? The directions are unclear as to how, at least for me.

4

you will need to add a new selector for the body element

5

Here is the step where you learned about CSS selectors

you need to add a new selector for the body. not add background color for the existing h1, h2, p selector. You shouldn’t alter the existing code at all.

hope that is clearer

here is also a video on selectors that should help

6

Thank you! That worked!

1 Like