Learn Basic CSS by Building a Cafe Menu - Step 21

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

up until this point the lesson hasn’t showed me what a #menu selector was. I am stuck on this part of the course. Can someone please walk me through?

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;
}
div #menu-id {
  width: 300px;
}
h1, h2, p {
  text-align: center;
}

/* User Editable Region */


Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/115.0

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

Link to the challenge:

1 Like

Hello and welcome to the community :smiley:!
When you are using a # hash tag your selector is targeting an element by its id value.

This div has “menu” as an id.
Target it by simply typing a hash tag followed by the text “menu”
Ex:

<button id="one">First</button>

We target it by its id value:

#one{ 
color: red;
}
1 Like

its asking me to do this and I’m highly confused.

The goal now is to make the div not take up the entire width of the page. The CSS width property is perfect for this.

You can use the id selector to target a specific div element. An id selector is defined by a name with a hash symbol directly in front of it, like this:

Use the #menu selector to give your element a width of 300px.

1 Like

Once you’ve used your #menu selector to target your div that has the id value of “menu” give your div the width attribute set to 300px.
Ex:

#divs-id { width:300px; }
2 Likes

Can you elaborate a little more on what is confusing you?

2 Likes

I figured it out folks! I really appreciate your help! You guys are great.

1 Like

Hey, I am stuck here too. Can you explain what you changed to correct it?

1 Like

#menu {
Width: 300px;
}
Do it like that

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