ansaurus

Question

Answer 1

+1 A:

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.

ewall 2010-04-07 14:17:24

Pedantry: that's <head>, not <header>.

Syntactic 2010-04-07 14:30:49

Thanks! Now fixed.

ewall 2010-04-07 14:39:14

Answer 2

+2 A:

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

Owen Orwell 2010-04-07 14:21:03

It's weird, on my project it doesn't work yet on a test page just for it, *it does work*. I have even removed most of the page and css.

Maushu 2010-04-07 14:35:45

Answer 3

+2 A:

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

David Dorward 2010-04-07 14:27:07

Issues with what? I mean, what would be the *proper* way to "render" that css?

Maushu 2010-04-07 14:37:11

Issues as in "Doesn't let you style anything outside the body, and isn't too happy with your styling the body in certain ways either" ... if I remember correctly.

David Dorward 2010-04-07 14:38:04

As for the proper way — the same as if you applied it to any other element. The head and title just default to being `display: none`. They are still part of the DOM and (in theory) available for styling. If my memory of time isn't failing me, I was fiddling with having the `<title>` displayed in the viewport back in the days when Mozilla was a browser in its own right.

David Dorward 2010-04-07 14:40:09

Answer 4

A:

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)

ChrisR 2010-04-07 14:27:24

can the downvoter plz elaborate whats wrong with this answer? I'm eager to learn/know :)

ChrisR 2010-04-07 14:35:40

Possibly becuase you have said body instead of html twice, meaning this statement is untrue: `no use to be able to style the body element since it isn't rendered by the browser`

ck 2010-04-07 14:38:26

Aw crap ... you are soo true ... I've read over it at least four time ... thanks for clarifying!

ChrisR 2010-04-07 14:42:37

And possibly because you can style the html element (as several other answers have pointed out) which makes the rest of the first paragraph wrong too.

David Dorward 2010-04-07 14:43:57

Answer 5

+3 A:

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.

Jamie Dixon 2010-04-07 14:34:34

+1 for the scrollbar trick

Maushu 2010-04-07 14:38:53

Answer 6

A:

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
}

Tor Valamo 2010-04-07 14:40:37

What does this have to do with the OP's question? It applies styling to `html`?

Matt Ball 2010-04-07 14:55:09

It uses styling for the html element.

Maushu 2010-04-07 15:31:49

Exactly. It was an example of styling the html element.

Tor Valamo 2010-04-07 15:34:19

ansaurus

tags:

views:

answers:

Styling the "html" element in CSS?

related questions