Why Does Styling the Background of the Body Element Affect the Entire Screen

Why does styling the background of the body element affect the entire screen?

Quote from http://www.w3.org/TR/CSS21/colors.html

The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for 'background-position') at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.

The body element is the root-element, and thus, as required by the CSS rules it loses its background style and the background style is applied to the containing canvas (the webpage area in the browser), therefor the entire screen is blue. The other properties stay with the element (e.g. the border).

why does background-color property fills the entire screen even body have 0 height?

body tag is always taking the whole document's body, so if you want to give background with limited height then put one DIV inside the body tag and then give specific height, then it will work fine.

so for the solution, please give background color to HTML div as well.

html {
  background-color: #ffffff;
}

Giving background-color to body applying whole page. Why?

The main reason is because the HTML takes the background-color of BODY since:

The background of the root element becomes the background of the
canvas and covers the entire canvas [...]

So since the default background-color of HTML is transparent it will take the one from BODY. However applying a color to both the HTML and BODY elements you will see that the BODY background doesn't cover the whole page anymore.

html {  background-color: blue;}
body {  background-color: red;}

<html>
<body>  <div>Hello World!</div></body>
</html>

Body's background is overflowing

That is weird. That's not what I would have expected, but this seems to indicate it's a known behavior, that if the background color on <html> isn't set, but the background color on <body> is, the <body> background will flood the whole <html> area.

To quote the spec:

For documents whose root element is an HTML HTML element or an XHTML
html element [HTML]: if the computed value of background-image on the
root element is none and its background-color is transparent, user
agents must instead propagate the computed values of the background
properties from that element’s first HTML BODY or XHTML body child
element. The used values of that BODY element’s background properties
are their initial values, and the propagated values are treated as if
they were specified on the root element.

You can also see an example at that spec link that is similar to yours.

UPDATE:

RE: your other question about <html> element's propagating to the viewport's background, I think that is also answered in a nearby section of the spec, though it is a little less clear to me:

The background of the root element becomes the canvas background and
its background painting area extends to cover the entire canvas.

Note canvas in this case refers to the infinite surface the page is rendered on, not the HTML5 canvas. This seems to me to describe the behavior you mentioned in a comment where the background of a <html> with a small width/height is propagated to the viewport, though why they need the additional section I quoted above, I'm not sure about. There is more info at that link if you are curious. There seems to be some overlap between sections AFAICT.

Why Does Styling the Background of the Body Element Affect the Entire Screen