Learn Basic CSS by Building a Cafe Menu - Step 21

HTML-CSS
1

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
2

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
3

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
4

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
5

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

2 Likes
6

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

1 Like
7

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

1 Like
8

@commakameleon
Welcome to our community! Please use the Help? which appears after three unsuccessful attempts on a step? By using this way to submit codes and questions, it allows people in the community to assist quickly and accurately to your concerns.

Thank you.

9

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