CODEWITHSUNDEEP
htmlcssstylesheet
Diogo Gomes
Diogo Gomes

Reputation: 2388

Styling the `<html>` element in CSS?

Can anyone explain to me why can we style the element html?
What are differences between it and body?

I usually see tutorials and multiple websites using body and never html, I only found about it when using YUI 3: CSS Reset since changing the background in body didn't work.

Edit: Actually, I still haven't found the problem regarding that, when I add the reset.css the background gets white, when I remove it returns to normal. Yet Chrome inspector says that the background is the normal one. Btw, this is getting off topic. :p
Edit 2: The culprit was the doctype. Somehow it made the html style in the css-reset render after the body style in my stylesheet. Maybe I should open a question regarding this.

Doctype: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Upvotes: 31

Views: 23908

Answers (6)

Tor Valamo
Tor Valamo

Reputation: 33749

The reason we're allowed to style the html element is because it is a DOM element like any other. All DOM elements can be styled to be something they are not, like a container. Take this example:

<html><body>This is my page.</body></html>

Using CSS to limit the body to 80% width, setting borders on the body and giving the html a different background color (creating an "off page" effect) would be perfectly acceptable, keeping the semantics of the markup intact without resorting to div clutter.

Here's a technique I discovered for centering containers (vertically and horizontally) on the screen without using tons of divs or tables, or even having to know the size of the centered container.

html {
  display:table;
  width:100%;
  height:100%;
}
body {
  display:table-cell;
  vertical-align:middle;
}
body > div {
  # "shrink wraps" the div so you don't have to specify a width.
  # there's probably a better way to do precisely that, but this works.
  display:table; 
  margin:0 auto; # center the div
}

Upvotes: 12

ChrisR
ChrisR

Reputation: 14447

html is the containing element for the whole document, it contains the <body> which is what is rendered by the browser and <head> which contains meta information on the page/document you are viewing. It has actually no use to be able to style the html element since it isn't rendered by the browser.

It can however be used to build you css selectors with (html div.dataView { color: red } for example)

Upvotes: 0

ewall
ewall

Reputation: 28100

Offhand, I would say: <html> is not a visible element per se, and it contains sections for semantic (e.g. <head>) and presentation data (<body>).

On the other hand, <body> is a block for visible elements, so it can be given a presentation style.

But people do apply styles to the <html> element for a couple cases: (a) because all of its child elements will inherit that style, and (b) in special cases like the scrollbar trick that Jamie Dixon mentioned.

Upvotes: 2

Jamie Dixon
Jamie Dixon

Reputation: 53991

Quite often you'll find people styling the HTML element since it does have an affect on the way the page is rendered.

The most notable style you're likely to see is

html,body{
   min-height:101%;
}

This is used to ensure that the scroll bars in browsers like Firefox, always show on the page. This stops the page shifting left and right when changing between long and short pages.

Upvotes: 20

Quentin
Quentin

Reputation: 943214

You can style the html element (heck you can head, title { display: block; } if you like), but browser support is a bit weak (IIRC, Internet Explorer <8 has issues).

Upvotes: 4

Owen Orwell
Owen Orwell

Reputation: 129

I don't believe you can, but styling <body> should work for you

Upvotes: 0

Related Questions