18 replies [Last post]
Dodge
Offline
Regular
Last seen: 17 years 2 hours ago
Joined: 2005-08-20
Posts: 15
Points: 0

Hi,

Why do I see, sometimes, style sheets that combine style for both "body" and "html"?

Like

html, body {
styles..blah;
}

I understand the "body" part ... but what is the html element all about? Is it always linked to the body selector?

Thanks
Dodge

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 41 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

html, body - what does this mean?

Hi

IE actually sees the html as another container outside the body. Really handy to use because others don't see it.

However, IE MAC has issues!!!!

Put height:100% in both html and body and you get a super wide page, for example.

Trevor

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 24 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

html, body - what does this mean?

<html> and <body> are two separate elements and can each be styled. In most (all?) browsers there is some space around your page, by default. In IE and Firefox, this is due to the default stylesheet's "body {margin: 8px;}". In Opera, the default is "body {padding: 8px;}". Safari/Konqueror users may run your own tests. Also, I was under the impression that some browser, somewhere, used "html {padding: 8px;}", but can't recall which or where I heard it.

To see the dichotomy, run this document. Test thoroughly before styling html, as different browsers have very different approaches.

<!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 name="generator"
        content="
        HTML Tidy for Linux/x86 (vers 12 April 2005), see www.w3.org" />
        

  <title>html &amp; body padding &amp; margins</title>
<style type="text/css">
/*<![CDATA[*/

html {
    border: 1px solid red;
    margin: 8px;
    padding: 18px;
    background: #ecc url(bullseye.jpg) right top no-repeat;
    }

body {
    border: 1px solid green;
    margin: 8px;
    padding: 18px;
    background: #efe url(bullseye.jpg) left top no-repeat;;
    }

p {
    background-color: #fff;
    border: 1px solid black;
    margin: 0;
    }

/*]]>*/
</style>
</head>

<body>
  <p>a sample sentence.</p>
</body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 16 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

html, body - what does this mean?

kk5st wrote:
<html> and <body> are two separate elements and can each be styled.

If that's true it makes my divitis article a lot better Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 41 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

html, body - what does this mean?

Hi

Just for a bit of fun then, set a fixed repeating image in the html style and a non-repeating one (that doesn't fill the page!) in the body.

Now compare browsers.

I tend to simply switch things off in html, not set things.

Trevor

Dodge
Offline
Regular
Last seen: 17 years 2 hours ago
Joined: 2005-08-20
Posts: 15
Points: 0

html, body - what does this mean?

That's very interesting... I had no idea there was anything beyond the out limits of "body"!

Trevor - you mention turning everything "off" in the html element - how is this done?

And if one uses the global reset is this effectively "turning" it off if it's not selected and styled?

/* global reset */
* {
	padding: 0;
	margin: 0;
}

Thanks all for the explanation.
Daf

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 41 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

html, body - what does this mean?

Hi

I have a default style sheet as follows:

html,body,p,div,img,h1,h2,h3,h4,li,ul,dl,ol,dd,dt,form,table,td,tr{
/*** Let's go commando ***/
  margin:0;
  padding:0;
  border:0;
  border-collapse:0;
  border-spacing:0;
}
input,select{
  margin:0;
  padding:0;
}
body{
  font-family:verdana,arial,sans-serif;
  font-size:76%; /*** Note: see http://www.thenoodleincident.com/ style the rest of font sizes in ems ***/

Trevor

Dodge
Offline
Regular
Last seen: 17 years 2 hours ago
Joined: 2005-08-20
Posts: 15
Points: 0

html, body - what does this mean?

Wow - you leave no stone unturned do you? Wink

That's interesting as well - thanks for letting me see that. Smile

Daf

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 47 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

html, body - what does this mean?

ClevaTreva wrote:
font-size:76%; /*** Note: see http://www.thenoodleincident.com/ style the rest of font sizes in ems ***/

I don't understand this, I believe "style all font-sizes in %" is better.

As far as font-size is concerned, ems and % are the same. By using font-size as ems in a style you may end up using one unit with two different values in the same style rule*.

e.g.

selector {font-size: 2em; margin: 2em; }  

The margin and the font-size are NOT the same.

To me, it makes a lot more sense and should be a lot easier for the uninitiated to understand what is going on if you use.

selector {font-size: 200%; margin: 2em;}

fwiw, thenoodleincident only says to use percents in the body and doesn't make any definitive statement about what to use in other elements.

* although this is true for % as well, people already have a good grasp that % is relative to some other value. The only confusing thing in html is working out what it is relative to. Fortunately, that isn't a problem for font-size.

briski
briski's picture
Offline
Elder
London
Last seen: 10 years 9 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

html, body - what does this mean?

ClevaTreva wrote:
I have a default style sheet as follows:

[code]html,body,p,div,img,h1,h2,h3,h4,li,ul,dl,ol,dd,dt,form,table,td,tr{
/*** Let's go commando ***/

Any reason not to use the * catch all rather than this list?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 41 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

html, body - what does this mean?

briski wrote:
Any reason not to use the * catch all rather than this list?

No

The list built up over time, but, no, thinking about it, I'll change my default code right now.

As to the use of % ems and pixels.

I prefer to set the font-size as 76% right at the start, then style my fonts and line heights in ems.

Widths, heights, margins, padding and text idents etc I use pixels.

It makes it easier for me to find each element type.

[edit]Now I remember, some forms controls look weird without border[/edit]

Trevor

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

html, body - what does this mean?

Quote:
[edit]Now I remember, some forms controls look weird without border[/edit]

Yep, you'll find that they will disappear.

Having universally zeroed margins and padding a useful technique is to then re-state some default elements that way you have control over some basic margins that are uniform rather than having to set margins every time you declare an element.

The more I look at things the more I'm coming around to Chris's thinking on percent for fonts, but it's a tricky business this relativity, well if you read Einstein's general theory it is.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 47 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

html, body - what does this mean?

ClevaTreva wrote:
As to the use of % ems and pixels.

I prefer to set the font-size as 76% right at the start, then style my fonts and line heights in ems.

Widths, heights, margins, padding and text idents etc I use pixels.

It makes it easier for me to find each element type.

Point taken. I still think it would be better to leave the comment I highlighted off advice posts. They key is setting the body font with a %. The advice on other font-sizes is personal taste rather than a hard and fast rule.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 41 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

html, body - what does this mean?

Hi

As to why I use 76% (which is, on the face of it, an odd choice) was that Owen found that this resulted in common font-sizes across a range of browsers (mainly older ones had issues with other sizes) and he was trying to find a body setting that levelled the playing field.

Far be it for me to contradict him, and I'm certainly not going to do all those tests again.

Trevor
PS, I'm trying a new avatar, drawn for me by one of my pupils in the style of the Simpsons type characters. Its quite life like!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 47 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

html, body - what does this mean?

ClevaTreva wrote:
As to why I use 76% (which is, on the face of it, an odd choice)

Ooops Smile. I didn't mean the font-size value -- but the units. 76% is 12.16px on Windows machines - which probably means IE/FF & O will all display it the same or similar at 12px. They all appear to use slightly different rounding mechanisms. With IE staying at a large size longer before rounding down a pixel than FF.

Sorry for the confusion.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 16 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

html, body - what does this mean?

So Treva, this:

* {
/*** Let's go commando ***/
  margin: 0;
  padding: 0;
  border: 0;
  border-collapse: 0;
  border-spacing: 0;
}

body{
  font-family:verdana,arial,sans-serif;
  font-size:76%; /*** Note: see http://www.thenoodleincident.com/ style the rest of font sizes in ems ***/

will zero out EVERYTHING?

Verschwindende wrote:
  • CSS doesn't make pies

briski
briski's picture
Offline
Elder
London
Last seen: 10 years 9 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

html, body - what does this mean?

yes - but I think the point was that this is not such a good thing after all as border: 0; on imput elements makes some of them invisable.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 16 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

html, body - what does this mean?

But to zero everything that's the easiest way to do it?

I won't use it, and if I do I'll replace the borders on input stuff.

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

html, body - what does this mean?

Why remove borders only to have to replace them, the border:0 rule is pointless and when you forget it's there or have failed to note it in someones styles and fart around trying to figure out why the input elements are not working it's a right p.i.t.a as I discovered whilst trying to puzzle this problem on a recent layout.

Stick to margins and padding they are the problem areas and when zeroed then re-set a default set of margins for grouped elements such as h#, ul, p etc. rather than have to state them for each rule set that comes along.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me