Learn Basic CSS by Building a Cafe Menu - Step 21

HTML-CSS
1

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

I have no idea what I’m doing here. I don’t know where to place the div, how to structure the 300:px, no idea at all how to do this. I feel like I need a better explanation on what to do.

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

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

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

Your browser information:

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

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

Link to the challenge:

2

@xUNTOUCHABLEx
What is it that you do not understand ? Is there anything in particular you have issue with ?

3

What? I literally said everything I don’t understand… How can I further explain something I don’t understand if I don’t understand it.

4

I think because you said: I don’t know where to place the div… so it wasn’t clear if you meant that literally or you meant that you didn’t know how to write a div selector.

For where to place the div, in the editor, add the new div selector after the last rule you see (that means after the h1,h2,p selector block)

Then inside the new div selector block add the new property: value; line of code with property replaced with the word width and value replaced with 300px

5

Hi @xUNTOUCHABLEx ,
We can put HTML elements directly in CSS sheet, then the area between open & closing element tags has applied the properties of CSS.

If you look CAREFULLY at the code you posted above you will notice the following things.
There is a

<body>
..
..
</body>

element in HTML &

body {
...
}

section in CSS.

Also check the other elements (<h1>,<h2>,<p>) in HTML & How CSS is bonded with those elements.

According to your case,
<div>...</div> is an HTML element, so you have to add div { } section in CSS sheet. Between the curly brackets, you can place your attributes and values.

HTML

<div>
   ...
   ...
</div>

CSS

div {
  myattribute: myvalue
}
1 Like
7

maybe your div is in wrong place… ? I think should be nested inside MAIN element.
For me DIV is like a box that keeps everything together inside… :thinking:

8

Yes, “DIV is like a box that keeps everything together inside…”

9

@hbar1st
That’s exactly what I was referring to ; I was confused as to what he wanted to do.

10

Hello, thank you for your explanation! really help me :slight_smile:

1 Like
11

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