What is the difference between applying css rules to html compared to body?

Asked 18/7, 2011 at 21:20 Answered 18/7, 2011 at 22:16

I don't see the difference between:

html {
    background: #f1f1f1;
}

and

body {
    background: #f1f1f1;
}

Any explanation?

Asarum answered 18/7, 2011 at 21:20 Comment(1)

Related (to the title, anyway): #4566442 – Farmann 18/7, 2011 at 21:41

There is no real difference (if you're just talking about where to apply background, otherwise BoltClock's answer to this other question is a better fit). html is an element, just like body is.

Both are valid choices, and both will both work in all common browsers.

The YUI Reset for instance, chooses to set a background on the html element instead of body:
http://yui.yahooapis.com/3.3.0/build/cssreset/reset.css

This requires that you set your background on html, for instance see: can't change body background color using CSS reset

See: http://dev.w3.org/csswg/css3-background/#special-backgrounds

The background of the root element becomes the background of the canvas and its background painting area extends to cover the entire canvas, although any images are sized and positioned relative to the root element as if they were painted for that element alone. (In other words, the background positioning area is determined as for the root element.) If the root's ‘background-color’ value is ‘transparent’, the canvas's background color is UA dependent. The root element does not paint this background again, i.e., the used value of its background is transparent.

And:

For documents whose root element is an HTML HTML element [HTML401] or an XHTML html element [XHTML11]: 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. It is recommended that authors of HTML documents specify the canvas background for the BODY element rather than the HTML element.

What that wall of text is saying is demonstrated here:

background on just body: http://jsfiddle.net/hhtzE/
background on html and body: http://jsfiddle.net/hhtzE/1/
background only html: http://jsfiddle.net/hhtzE/2/

Piffle answered 18/7, 2011 at 21:39 Comment(0)

While body and html can often be treated the same, they are not the same thing. The body can have margins, padding, and borders, and be moved relative to the html element. I sometimes use body margin and padding to make a white "page" on a light background, and it prints the same as it looks.

See this fiddle for a simple example showing the two can have different background colors.

The relevant CSS is as I commented in nomulous' answer:

html {
    background-color: #ffffc0;
}
body {
    padding: 2em;
    margin: 2em;
    background-color: white;
    border: 1px solid black;
}

There is also the :root element because not all browsers (cough.ie.cough) treat the html element as the root of the DOM.

Herzberg answered 18/7, 2011 at 22:5 Comment(2)

You can also put margin/padding/border on html, if you like. I'm sure you know that, but your second sentence maybe sounds like it's saying you can't do that. – Piffle 18/7, 2011 at 22:12

@Piffle - yes, good clarification, thanks. I don't do that but I could do that. – Herzberg 19/7, 2011 at 1:7

html is the parent of body. One way to see the difference is to do:

html {
    overflow: scroll;
}


body {
    overflow: scroll;
}

You will see that there are two nested sets of scrollbars, one belonging to html and the one inside that belonging to body.

Nashner answered 18/7, 2011 at 21:23 Comment(1)

I believe, i.e. also the height is different (actual browser window height (html) vs. document height(body)). Not sure if that ever plays a role w/o javascript use... – Watanabe 9/4, 2012 at 14:17

Someone wrote here that is always 100% height but it is not true!

Try to do (tested on FF4):

html{
    background:yellow;
}
body{
    background:red;
    height:100px;
}

<body> color affects <html> color only when <html> doesn't have color set. The most annoying thing here is when <body> has color and <html> don't, some browser versions will have trouble with last direct child block element with margin. Color will be cut after the element and margin will be of <html> color. It is always true when <html> color is set.

On the other hand, when <html> background is set, <body> can have for example margins. This is simply mess.

Best practice so far is to apply background color, fonts etc to both. Simply every time you will write:

body{}

change it to:

body,html{}

Don't use any CSS box-model properties on <body> and <html> (or leave it unmodified at all, just to have peace of mind). Create inner element (may be of width 100%) and work with it instead.

Flathead answered 18/7, 2011 at 22:16 Comment(0)

There shouldn't normally be any difference at all, because those elements are both supposed to be taking up the full screen. It's just like having a div inside some other div. But I think it's more correct to style the body tag, because html isn't really part of the layout.

Rasp answered 18/7, 2011 at 21:23 Comment(1)

Give your body some margin and you'll see the difference. html { background-color: green; } body { padding: 2em; margin: 2em; background-color: yellow; } – Herzberg 18/7, 2011 at 21:54

Recommended topics

Hot tags