Learn Basic CSS by Building a Cafe Menu - Step 23

HTML-CSS
1

I don’t understand what it wants me to do

Your code so far

/* file: index.Ext.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.Ext.css */
body {
  /*
  background-color: burlywood;
  */
}

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

#menu {
  width: 300px;
}

Your mobile information:

SM-A032F - Android 13 - Android SDK 33

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

Link to the challenge:

2

Can you explain a little more what you don’t understand? Do you know what the #menu selector is? Do you know how to set the background color property? If not, you can look at the body selector above because you previously set the background property on that element but then commented it out.

3

(').Your code so far

/* file: index.Ext.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.Ext.css */
body {
  /*
  background-color: burlywood;
  */
}

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

#menu { <div=burlywood
  width: 300px;
}

Your mobile information:

SM-A032F - Android 13 - Android SDK 33

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

Link to the challenge:
https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-basic-css-by-building-a-cafe-menu/step-23(').

4

Does this look the same as how you set the background color for the body element?

5

No

Something like this?

#menu {
  width: 300px;

body 
/* background-color: burlywood; */
}
6

I’ve edited your code for readability. 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

This is how you set the background color property to burlywood for the body element. But then you added /* and */ around it to comment it out. If you don’t want to comment it out, then you remove the /* and */. So now that you know how to set the background color to burlywood for the body element, why can’t you do the same thing for the #menu element?

8

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