Why BODY tag doesn't override HTML tag properties?

Question

I have applied this css to my html document:

html {
  background-color: red;
}

body {
  background-color: yellow;
}

and the background of the page gets red instead of yellow. body comes after html so it must override the red color of html. Why doesn't it happen? thanks in advance.

I want to rephrase this question "HTML or Body? Which one should loose?" — Martin, Feb 05 '21 at 12:33
@J.Sadi all the element have auto height by default which will lead to 0 if there is no content inside. In other words, html has not a height equal to the screen height by default — Temani Afif, Feb 05 '21 at 12:41
@TemaniAfif auto on html will lead it to full height. Execute the snippet of the question and you will see. — jsadev.net, Feb 05 '21 at 12:44
@J.Sadi no it won't, only the background will cover the entire screen (the canvas) due to background propagation. Add border to see: https://jsfiddle.net/wm3L1bno/ .. it's only convering the html content which is in this case 8px coming from the default body margin. Remove the margin and the border will collpase: https://jsfiddle.net/wm3L1bno/1/ .. you can also inspect the element to notice the real height — Temani Afif, Feb 05 '21 at 13:06
@J.Sadi mode details here: https://stackoverflow.com/a/48503609/8620333 — Temani Afif, Feb 05 '21 at 13:11
@TemaniAfif thats right if you want to inherit the height to the body, if its unset on html body will get 0 height, but for its own htmls default is full height. Just try it, and you will see. — jsadev.net, Feb 15 '21 at 14:08
@J.Sadi not sure why you are insiting .. show me one example where the html has full height by default — Temani Afif, Feb 15 '21 at 14:11
@TemaniAfif as i told before... the example above :) No height is set, but the red background is on full height. — jsadev.net, Feb 16 '21 at 15:04
@J.Sadi and as I explained, the *full height* of the background is due to background propagation not because the html is full height. The background is propagated to the canvas. In that example the html element is not full screen height. This is a special feature related to background (you can read about in the link I gave in my comments) — Temani Afif, Feb 16 '21 at 15:12
@J.Sadi and yet another example: https://jsfiddle.net/x1kwdLmj/ .. I am explicitely setting a height to html and the background is still covering all the screen not only the height I specified. — Temani Afif, Feb 16 '21 at 15:13

mplungjan · Answer 1 · 2021-02-05T12:28:21.667

5

Because your body is empty (0px height)

If we change the h/w of the body, you get this (including margins/padding you can reset)

html {
  background-color: red;
}

body {
  background-color: yellow;
  width: 100vw;
  height: 100vh;
}

With content:

html {
  background-color: red;
}

body {
  background-color: yellow;
}

<h1>Body no longer empty</h1>

edited Feb 05 '21 at 12:28

answered Feb 05 '21 at 12:26

mplungjan

169,008
28
173
236

score 4 · Accepted Answer · answered Feb 05 '21 at 12:30

The HTML and BODY elements are different elements, so the cascade rules (including the order you placed your rulesets in) are not relevant here.

Your source of confusion probably steps from the fact that CSS has some special rules for the HTML and BODY elements:

For documents whose root element is an HTML "HTML" element or an XHTML "html" element that has computed values of 'transparent' for 'background-color' and 'none' for 'background-image', user agents must instead use the computed value of the background properties from that element's first HTML "BODY" element or XHTML "body" element child when painting backgrounds for the canvas, and must not paint a background for that child element.

So if you set just one of them, then that is the colour you will get.

Here you have a red HTML element.

html { background: red; }

Here you have a yellow HTML element because it pulled the colour from the BODY element.

body { background: yellow; }

However, since you have set both those special rules don't apply.

The HTML element is set to red and the BODY element is set to yellow.

You just can't see it because your body element has no content so gets a computed height of zero.

html { background: red; }
body { background: yellow; }

<p>Hello, world.
<p>Since there is content in the body, it no longer has a zero height, so you can see its background.

Why BODY tag doesn't override HTML tag properties?

2 Answers2