Learn Basic CSS by Building a Cafe Menu - Step 18

HTML-CSS
1

Tell us what’s happening:

tep 18
The text is centered again so the link to the CSS file is working. Add another style to the file that changes the background-color property to brown for the body element.

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; }
h1, h2, p{background-color: brown;}  



/* 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/131.0.0.0 Safari/537.36

Challenge Information:

Learn Basic CSS by Building a Cafe Menu - Step 18

2

Hello FELOPO,

You correctly changed the background colour of the h1, h2, and p elements. But the question asked to change the background of the body element instead.

3

can you help me because im a bit stuck there

4

Yes of course, which part are you stuck on right now?

5

Sorry, your code does not pass. You’re getting there.

You should use a body selector.

6

Assuming your code is still the same as the first post, this part is correct, {background-color: brown;} but the question wants you to change the body element not h1, h2, p so you will have to change that accordingly.

7

im confused right now about the body element. can you give me the code for it?

8

That’s not allowed unfortunately.

To clarify, in the code that you already have h1, h2, p are all elements. And in the first part of the code you changed these elements to make sure the text will be centered.

Now ‘body’ is also an element. It’s quite literally the body of your html document. Where you put all the html code to make the site. (Like the text, and headers etc).

You can change individual elements like you did before, but if change the css of body it will change the entire page. They want you to change the background of the entire site brown.

You already worked out how to change backgrounds as you wrote above:
h1, h2, p{background-color: brown;}
Now instead of changing it for these elements, try and replace the h1, h2, p to body instead.

9

Thank you i just did due to your assistance.
Anyway, Im Felix from Ghana.
I think i will be happy to know you are okay with it

1 Like
10

Yay Im glad, good job!