Newbie question from non-newbie

Forum Moderators: not2easy

Message Too Old, No Replies

Newbie question from non-newbie

What is 'html' for in a stylesheet?

gmac6791

10:53 pm on Feb 11, 2014 (gmt 0)

I've been away from the coding world for a couple years, and though I still remember a lot, I was looking at a stylesheet that starts with:

html {
background: #EDEDED;
}

I cannot remember why the 'html' is used, nor can I find anything about it via Google.

Can someone enlighten me as to whether it's necessary, or is it just a personal preference?

ronin

11:33 pm on Feb 11, 2014 (gmt 0)

It's non-standard.

I may be wrong, but I suspect it's probably there as some kind of hack.

The standard approach is exactly as you remember it:

body {
background: #EDEDED;
}

Any contemporary browser will understand that correctly and since support for IE7 and IE8 will end when Windows XP has its sunset in April 2014, there's really no need for this sort of CSS hack anymore.

gmac6791

11:38 pm on Feb 11, 2014 (gmt 0)

Thanks, ronin. I was hoping you'd say that. :)

birdbrain

12:03 am on Feb 12, 2014 (gmt 0)

Hi there gmac6791,

it is quite common to set values for the "html element". ;)

Here is an example of it's use...


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title>CSS usage of HTML element</title>

<style>
html, body {
    height:100%;
    margin:0;
    background-color:#f93;
 }
#container {
    width:960px;
    height:100%;
    margin:auto;
    background-color:#fff;
 }
</style>

</head>
<body>

<div id="container"></div>

</body>
</html>

Remove "html," from the CSS and see what happens. :)

birdbrain

Samizdata

12:19 am on Feb 12, 2014 (gmt 0)

It's non-standard

The HTML element is actually used in examples given in the CSS specifications.

This from CSS 1 all those years ago:

Inheritance starts at the oldest ancestor, i.e. the top-level element. In HTML, this is is the 'HTML' element (although many HTML authors omit this tag). In order to set a "default" style property, one should use 'HTML' as selector: HTML { color: dark-blue }

Source: World Wide Web Consortium

...

drhowarddrfine

4:07 pm on Feb 12, 2014 (gmt 0)

I think he meant using CSS properties on the HTML element is non-standard but even that's not true. A number of years ago, applying properties to it wouldn't work but that changed quite a while ago. Now it's quite common to see sites that use the body element as the main wrapper around the page and the html element used for background color (and even images? I forget). At least we do it that way.

It was still a little inconsistent between browsers a few years ago so I don't know how things are today.

lucy24

10:01 pm on Feb 12, 2014 (gmt 0)

Think of it as a fallback. 99% of the time there's no difference between "body" and "html" since the <body> element is, by definition, the entire visible page. Just watch out for the other 1%. In my case it was the footer of short pages: setting the html height to 100% was the only way to force the footer to the bottom of the browser window. (That is: the only way other than using javascript. Never do something with scripting that can be done in html-plus-css alone.)

gmac6791

10:27 pm on Feb 12, 2014 (gmt 0)

Very good info, everyone. A lot has changed since I last designed websites, which was before mobile became big enough to be concerned about. I feel like I'm re-learning how to do it all over again! Thanks for all your input.

drhowarddrfine

2:44 pm on Feb 13, 2014 (gmt 0)

the <body> element is, by definition, the entire visible page.

To be clear, the body contains the elements of the document but is not necessarily the visible part of the page. It's possible the body is only a small part of the visible page.

Paul_o_b

3:35 pm on Feb 13, 2014 (gmt 0)

As drhowarddrfine said the body may only be a small part of the page to start with and a background colour on the body may only encompass its contents.

However the body is a special element in that if you apply a background to the body element it is automatically propagated to the html element if the html element has no background colour defined.

That means you can safely use body {background:red} and it will propagate automatically to the html element and create a background that covers the whole viewport.

This can bee seen in a simple example:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
html{background:blue}
body{background:red}
</style>

</head>

<body>
<p>test</p>
</body>
</html>

The red body background in the above code only encompasses the p element and not even the default margins on the page. Remove the html rule though and then the red background from the body is propagated to the html element and the whole thing is red - this is not merely the background on the body showing but the fact that the browsers has taken the rule form the body and placed in on the html element instead.

quote from the specs:http://www.w3.org/TR/CSS21/colors.html

For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element. For documents whose root element is an HTML "HTML" element or an XHTML "html" element that has computed values of 'transparent' for 'background-color' and 'none' for 'background-image', user agents must instead use the computed value of the background properties from that element's first HTML "BODY" element or XHTML "body" element child when painting backgrounds for the canvas, and must not paint a background for that child element. Such backgrounds must also be anchored at the same point as they would be if they were painted only for the root element

lucy24

10:56 pm on Feb 13, 2014 (gmt 0)

Ah, that explains margins. If you say nothing but

body {margin: 10%; background-color: #CCC;]

the whole document will have 10% margins, defined relative to the body's containing element, the html. But the whole document including the margins will be #CCC, just as if you'd said {padding} instead.

Paul_o_b

5:19 pm on Feb 15, 2014 (gmt 0)

But the whole document including the margins will be #CCC, just as if you'd said {padding} instead.

Yes, that's what I just explained and any background applied to the body is propagated to the html element. The background is no longer on the body element but moved to the html element when html has no background defined.


html{background:red}
body {margin: 10%; background-color: #CCC;}

Now the body and body's background will be 10% away from the html element.