Background-color html element or body

HTML-CSS
1

Hi,
I’m currently following a tutorial of Mozilla Developer Network. It’s about understanding the basics of html/css.

In the tutorial I came across an instruction to set background-color in the html element. Is this an okay way of setting a background-color?

html {
background-color: #00539f;
}

I thought to set a background-color for the entire page is by setting it in the body?
Like this:

body {
background-color: #00539f ;
}
2

Hi @Wassenaar,
Another interesting question!
Applying the background color to the body is a more common practice.
The html is like a container with everything in it, but the main visual content of the page is under the body element. So it’s better to set the background on the body element. I may be wrong on this, but I haven’t seen or heard people recommending setting the background on the html.
I hope this helps!

1 Like
3

Yes, that is what I was thinking too :slightly_smiling_face:

4

Does it also apply to font-size or font-family?

I always apply properties like: background-image, font-family in the body.

Never in html.

5

Setting those styles on html doesn’t mean it won’t work. Since all of your elements are inside the body, you could set the default styles on the body element. There are very rare cases in which setting the font-size and those other properties on the html is helpful but those are rare. I also prefer to apply those properties on the body.

1 Like