Do and don’t do with styling and tags

by

When I look at some CSS style for a web page, I typically first look
at styling the <html> and <body> tags and then I look at other
sub-elements.
The styling of <html> and <body> tags is quite confusing by many web
designers and I haven’t find out some guidelines clarifying this topic.

So I’m creating this question:

Which styles can be applied to <html> and <body> tags (which create
such base for a typical web page)?
And what is good/bad technique?

Answer

By convention, most styling should be placed in the <body> element.

But there is one important reason to apply styles to the <html> element itself: when you are setting the default font styles, in particular font-size. This is because the <html> tag is the root element, thus rem (root em unit) sizing is based on whatever is set for the <html> element.

An example of this is as follows

html {
    font-size:12px;
}
body {
    font-size:16px;
}
.em-block {
    font-size:1.2em;  /* Renders to font-size: 19px */
}
.rem-block {
    font-size:1.2rem; /* Renders to font-size: 14px */
}

The only other real scenario why you would need to style the <html> element is if you, for some really odd reason, didn’t have the body take up the full HTML element. This is rare and generally not recommended, but I have seen it done before. In this case vh, vw, vmax, and vmin would all be sized relative to the <html> element, not the <body>.

You can put other styles that you want inherited in the <html> tag, there is no rule saying you cannot, it’s just not recommended or conventional and can be overridden by its children, particularly <body>.

Attribution
Source : Link , Question Author : xralf , Answer Author : Zach Saucier

Leave a Comment