Ok, so why does div have to go before body, when div is located within the body?

HTML-CSS
1

isn’t writing div before the {} the selector?

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>
<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" type="text/css" />
</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;
}

div {width: 300px}

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/102.0.5005.63 Safari/537.36 Edg/102.0.1245.39

Challenge: Step 22

Link to the challenge:

2

The order of the selectors in the css is not related at all to the order of elements in the html

3

you can put in whatever order you want things in CSS

4

Well, sort of. If they are completely unrelated then yes, order doesn’t really matter. But if two rules style the same property on an element and have the same specificity, then order does matter (the last rule will win). That’s part of the “cascade” in Cascading Style Sheets.

Introducing the CSS Cascade

5

I just don’t see why the selector didn’t work before I placed it at the start, in the following lesson, it is placed at the end, yet it doesn’t accept the div in the center, is this because the lesson requires a specific input or is it along the lines of elements and tags, (placing it in the center actually has an affect upon it)?

6

Hmm… I just placed div {width: 300px} at the very beginning of styles.css and it passed. Maybe you had a syntax error in there you didn’t see? Try it again and if it doesn’t work for you then paste your CSS in here.

UPDATE: I think I didn’t quite understand where you were trying to place it. So I tested the CSS at all three locations, beginning, middle, end, and they all passed.

7

Same here, yet when I linked this problem, the code didn’t pass and the hint was that the code needed a div selector, I honestly think I just experienced a glitch in the matrix.
Thanks everyone.

8

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