5

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?

  • What styles are you applying to HTML? Typically there's no reason to apply styles to HTML – DA01 Oct 20 '14 at 19:58
  • add html head link,html head{display:block} to your the next blank html document you come across. fun times! – albert Oct 22 '14 at 0:03
5

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>.

  • Also, backgrounding <html> allows you to treat <body> as a "container div" without adding extraneous, styling-oriented markup. Current HTML+CSS allows for purely semantic markup; there's no reason to inject crap for appearance's sake. – Stan Rogers Oct 30 '14 at 14:16
  • html, body {height: 100%} for setting further child elements to viewport height (the viewport vh unit is still buggy on some browsers) – Drenai Oct 2 '17 at 20:37
  • @Brian viewport units support all the way back to IE9, so they're not really an issue to use these days – Zach Saucier Oct 3 '17 at 0:47
  • @ZachSaucier There's 11 known issues, including "all browsers consider 100vw to be the entire page width, including vertical scroll bar...causes hor scrollbar"... and "vh on iOS is reported to include the height of the bottom toolbar". These can be a big deal, so I cannot use vh/vw as can't afford to have my 100% out by 20px on any browsers. – Drenai Oct 3 '17 at 9:29
1

Short version:

  • <html> - typically only add what you absolutely have to
  • <body> - again add judiciously

As your project grows the CSS specificity can and will come back to bite you if you're not careful.


Some more details and resources you may find useful

HTML is highly permissive, there are tons of ways to accomplish a task, espeically in layout. This generally leads to lots of opinions about what is "best". For me I turn to people that are well respected when looking for a starting point.

In this instance I'd start with Normalize css. It is not the "end all, be all" but I've found it to be a good place to start. Plus when you look at the normalize.css file it has lots of very good comments that help explain the choices that were made. It isn't going to tell you what you can/can't put in, but I think it does a good job of sorta laying out what a level base can look like.

After that your project will probably want for some structure. The structure of one's HTML and CSS will go a long way to understanding how and why choices are made. One source of "good code smell" is SMACSS, it's a structure I'm working on putting in my work flow. SMACSS is not the only solution, but it can help you understand your project and how to put good bones under it.

If you are interested there are several other good CSS structures to look into: OOCSS & BEM

Finally I like to see how other working professionals do their work. Several major sites have put up posts about how they work, one that I particularly liked came from Trello's blog. Looking at things like this is good because it's not just the theory, it's the toughts of people using these tools day to day to solve real problems on real sites.

None of these alone will solve the question of "What to do put in/how to style <tag name> ?", but they will serve as guide posts that will lead you to the solution that works for you, your team, and your project(s).

-1

you are supposed to apply styling to body tag. Like set the background color to white, set font, font color, font size etc. You should always use external style sheets. For better management and handling, you should use multiple style sheets.

body {
background-color: #56473 ;
font-family: Arial;
font-size: 1.3em;
margin: 5px;

or anything you want here.

  • 4
    for performance, though, you should use a single style sheet. – DA01 Oct 20 '14 at 19:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.