0

I hope that it's not a weird question, but lets assume I have the following html code:

<body>
    <header>
        <h1>JavaScript Date function</h1>
    </header>
    <main>
        <p id="demo">This is a paragraph.</p>
    </main>
</body>

I also have the following CSS code for this html:

html , body{
  background-color: blue;
}
body{
  background-color: white;
}

I wonder how come that everything except my header and paragraph is in blue, and only the header is white? Ain't all of the html file suppose to be white since the last background color attribute for the body matters in this instance?

Here is the image to show what you get: enter image description here

Doesn't it all suppose to be in the same white color?

mashtock
  • 400
  • 4
  • 21
  • You've set a white background for `` and a blue background for ``. What are you expecting? – Wais Kamal Aug 18 '21 at 21:42
  • I didn't set a background color for html, I did it for html , body which isn't it basically the same as just body? I hope it's not a dumb question – mashtock Aug 18 '21 at 21:43
  • 1
    No. `html, body` means "html **and** body". `html body` means "any `body` inside `html`", which in your case is the same as `body`. – Wais Kamal Aug 18 '21 at 21:44
  • Oh sorry... New to css :) – mashtock Aug 18 '21 at 21:45
  • 1
    Feel free to ask :') – Wais Kamal Aug 18 '21 at 21:46
  • I noticed that by typing html body it just painted everything in blue, how come? Now isn't it suppose to be the last rule? – mashtock Aug 18 '21 at 21:53
  • The first rule is more specific, i.e. it is referring to "`body` inside `html`", while the last rule is referring to any `body`. The more specific rule takes precedence. Refer to this link to learn more about CSS specificity: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity. – Wais Kamal Aug 18 '21 at 22:00
  • Thanks very much. – mashtock Aug 18 '21 at 22:02

1 Answers1

0

The HTML tag includes everything within the viewport. The body is a container that, by default wraps everything it and expands to be as large as it needs to be to do that, no more. So since you didn't apply white to the HTML tag, it's blue, and the body is only as big as your header and main.

Faust
  • 15,130
  • 9
  • 54
  • 111
  • 2
    *The body is a container that, by default wraps everything it and expands to be as large as it needs to be to do that,* --> the html is also doing the same, the html doesn't cover all the viewport like your are saying. Here we are simply face a special behavior of background propagation from the html to the viewport (add border to the html to see what is happening) – Temani Afif Aug 18 '21 at 22:11
  • @TemaniAfif, Got it. Unfortunately, I can't delete my answer as long as it is accepted. – Faust Aug 18 '21 at 22:43