Learn Basic CSS by Building a Cafe Menu - Step 21

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:
and I have done something like this in the stlye.css file

.Menu-id {
width: 300px;

}

Yet still wrong

<!-- 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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/605.1.15

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

Link to the challenge:

1 Like

Hello, perhaps re-read the directions, make sure the correct symbol is in front of the menu selector and that you write the selector the same way they describe on the bottom of the instructions. Hope this helps :slightly_smiling_face:

Hello @padcliff88!

Try removing the -id from the selector.

Many people are confused by the example.

As well, make sure to use the lower case for the #menu.

Keep up the good progress!

1 Like

Oh wow thank you very much and that works. God bless… I will keep pushing.

1 Like

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