Learn Basic CSS by Building a Cafe Menu - Step 20

HTML-CSS
1

Tell us what’s happening:

I reviewed the explanations regarding this challenge and I believe I had coded correctly, but still cannot pass. What am I missing?

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>

<!-- User Editable Region -->

  <body>
    <main>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
      <section>
        <h2>Coffee</h2>
      </section>
    </main>
  </body>

<!-- User Editable Region -->

</html>

/* file: styles.css */
body {
  <div id="menu">
  </div>
  background-color: burlywood;
}

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

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36

Challenge Information:

Learn Basic CSS by Building a Cafe Menu - Step 20

2

Welcome to the forum @toshitazawa

Here is the hint message:

Your opening <div> tag should have an id attribute set to menu.

The instructions ask you to:

The div element is used mainly for design layout purposes unlike the other content elements you have used so far. Add a div element inside the body element and then move all the other elements inside the new div.
Inside the opening div tag, add the id attribute with a value of menu.

You do not appear to have added the div element to the body element in the html file.

Happy coding

4

Thank you for your assistance, but I’m confused by your statement,
" You do not appear to have added the div element to the body element."

When within my code,

Screenshot 2024-09-03 at 15.35.09
Screenshot 2024-09-03 at 15.35.09774×374 18.8 KB

I see the div element nested within the body.

5

I am also befuddled by the behavior where repeatedly when I attempted to just copy and paste the above styles.css code within my reply, the texts after the opening curly braces were left blank (omitting the most important code in question beginning with “<div id=”).

6

You can’t write html in the css
you need to add the attribute to the existing element in the html

for the code disappearing, you are using a browser, the html is interpreted and the result displayed, you need to format as code for the html to not be interpreted:

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

7

Hello @toshitazawa !

If you try want to post the code you have in your response, you can do this by placing three ``` back ticks before and after the code you wish to share with the community.

As both of the previous posts have explained, we cannot place html which uses the <element name> within the CSS styles code selectors.

<p>{ color: green}; is not valid syntex for CSS

I hope this helps understand a bit better.

Wishing you good progress on your coding journey. :slightly_smiling_face: