Learn Basic CSS by Building a Cafe Menu - Step 23

HTML-CSS
#1

Tell us what’s happening:
What is wrong with my code? I exactly do the thing mentioned in the description but still gives me errors. I have been stuck in this step for two days now :frowning:

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

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

div {
width: 300px;
}

<!-- 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>
      <header>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
      </header>
      <main>
        <section>
          <h2>Coffee</h2>
        </section>
      </main>
    </div>
  </body>
</html>

/* file: styles.css */
body {
 /*background-color :burlywood;*/
}

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

div {
  width: 300px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

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

Link to the challenge:

#2

You need to add background color to your div element, but you still have not code anything into it.

#3

Thank you.
But still doesn’t work. I added the background colour to the div but coloured only the title part.

#4

Show me the code so I can help you inspect it.

I believe the goal of this step is only colored all the text that included in the div element which include camper cafe, 2020, coffee. It should be look like this
image

#5

This is the last code I tried , but still errors

body {
/background-color :burlywood;/
}

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

div {
/background-color :burlywood;/
width: 300px;
}

#6

/* background-color: burlywood; */

The symbol of / * */ is only used for comment in CSS. Instead right now you need to implement it into a code. So delete the / and use the right spacing for your code

#7

Thank you
This is the latest code I have. Could you please elt me know where I need to put the /**/ to comment out? Still doesnt work
body {
background-color :burlywood;
}

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

div {
background-color :burlywood;
width: 300px;
}

#8

body {
/background-color :burlywood;/
}

h1, h2, p {
text-align: center;
}
The outcome of this code is the same as you showed in your message but still gives me the error
div {
background-color :burlywood;
width: 300px;
}

#9

Restart the lesson and you can start to styling your div again with

background-color: (the color that is asked);

You have edited your body element in CSS.

#10

Thank you,

Is this the correct code? it gives the results it should give but still there are error. How to comment out it?

body {

}

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

div {
width: 300px;
}
div {
background-color: burlywood;
}

#11 
body {
  /*
  background-color: burlywood;
  */
}

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

div {
  width: 300px;
  background-color: (color as instructed)
}

Your default code should be like this. So You only need one div and add the property of background color. You don’t need to add another element or property and value beside background color and the value asked by the instruction

#12

Step 23Passed

Now use the existing div selector to set the background color of the div element to be burlywood.

  • Understanding “user story” is very important.

  • Please pay attention to details in “user stories”.

use the existing div selector to set

1 Like
#13

Thank you very much. It finally worked :slight_smile:

#14

Sure Vikram,

Thank you :slight_smile:

#15

Thank you very much . I was stuck in this step for many days