Learn Basic CSS by Building a Cafe Menu - Step 21

Tell us what’s happening:
Describe your issue in detail here.

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 id="menu">
      <main>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
        <section>
          <h2>Coffee</h2>
        </section>
      </main>
    </div>
  </body>
</html>
/* file: styles.css */

/* User Editable Region */

body {
  background-color: burlywood;
}
h1, h2, p {
  text-align: center;
} 
#menu-id { width: 300px; }

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

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

Link to the challenge:

1 Like

Great work! I think your ‘#menu-id’ should just be ‘#menu’.

step 21: how to use a #menu selector?

If you erase the ‘-id’ part you should be selecting ‘#menu’.

You are very close.

But the instruction is try to make you understand that to select any specific div element we can just use id selectors

And to select any I’d we just use # for it.
Like

#class { property: value;}

See how we just targeted our #class I’d here.

Hope you understand.

yes thank you i understand

1 Like

My pleasure buddy. Keep coding and learning.

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