CSS: Base styles on body or html?

Question

When I declare some base styles for my site I have used to do that on the body tag. Like for example

body {
  font-size: medium;
  line-height: 1.3em;
}

But I have also seen people do things like that on the html tag. And on both. Where should it be done? Should some be at one and some at the other? Should all be on one of them? Or does it simply not matter at all? Or?

Answer 1

I'd add styling on the body tag as it makes more semantic sense (you're not going to style the head, title and so on).

Also I don't see a lot of people adding styles directly on the html tag anymore except to reset some default styles...

Answer 2

For the strict doctype, only body is necessary. However if the browser is in quirks mode, you'll very likely need to target table cells as well.

In both cases you may want to also target form elements, since they generally inherit the platform default.

Answer 3

I would either set to body itself. I tend to do that or a use a base div style, depends on what I'm doing, but putting it on the html object seems unintuitive.

Answer 4

html is the container for body, so the latter will inherit from the former. Be careful when mixing:

html, body { font-size: 80%; } will make your body's font size to be 80% of 80%.

I always go for html, but there is an issue with ancient browser support and/or quirks mode.

Answer 5

From my personal experience, the only situation where putting certain base styles on both html and body is necessary is when you're doing some funky hacks that rely on 100% width or height ("sticky" divs or some such). In all other situations, it is perfectly OK to declare the base styles only on body. In other words,

html, body {height:100%}

might actually be necessary, but

html, body {font-family:Arial}

certainly won't. After all, all the elements on which you'll need the font-family will be children of body anyway, so there's no point in specifying it for html, too.

Answer 6

I like applying base declarations to html. Most of the time, I use body as a container, like so:

html {
 /* Base styles go here */
 font: 14px/1.5 Arial, sans-serif;
 background: darkgreen;
}

body {
 background: lightgreen;
 padding: 0 20px;
 width: 920px;
 margin: 0 auto;
}

View the demo: http://jsbin.com/atiso3

Most people tend to use additional DIVs just to accomplish this basic behavior. It’s not necessary when you know how to use html and body in CSS ;)