Styling Your Body
Diving into the depths of CSS involves much more than just mastering selectors, properties and semantic (X)HTML, it has a lot to do with knowing when you need extra elements (span, div, etc). What do I mean?
Since CSS layouts have exploded into the mainstream of web design there have been few designer/developer types who can say they haven’t seen id="wrap" or id="container"; in fact, most of have been using it for years and it’s a bit of a standard now. Meanwhile we all seem to forget that there’s a lovely element we rarely use… html, the proud parent of body. All parents like to see their children succeed, but html has been depressed for some time now. Why? Because it’s child isn’t being put in in the 4th quarter, it’s being taken out in the 8th inning, not being used to it’s fullest potential because of this smug little punk on the block called "container" (or "wrap", for short).
No one forgets that body and html are there, they just forget they’re a stylable elements, everything can be manipulated with CSS, (remember?). So rather than doing something like this:
#container{
width:60em;
margin:0 auto;
}
Try filling out your body like this:
body{
text-align:left;
width:60em;
margin:0 auto;
background:#fff;
}
And then style that proud parent html (at the top of the style sheet)
html{
background:#ccc;
text-align:center;
}
There you go, you cut just down on an extra div you didn’t need. This technique will work in 95% of the web sites out there. The only case it wouldn’t fly is if you need to put content spanning the whole top of the browser window (with a center aligned page). With 95% of page load time happening on the front end, every character you can shave off counts. Since there’s very little semantic benefit to a having html body div#wrap, it’s usually an easy choice to cut out.
Not only is it an easy choice the drop, but it’s a seemless integration. You essentially move all the layout properties up a level (move #wrap to body and body to html). There’s usually little to no change for the user and few things to fix.











June 2, 2008 at 9:53 am
I really need to start doing this more often. I’m so entrenched in always using a DIV for page wraps, but it’s really not necessary.
My testing is that only IE 5.5 and lower have any problem with this, which is a big “so what.”
June 2, 2008 at 9:55 am
Absolutely, it’s all about site stats. I can see worrying about IE 5.5 if you have visitors who use it, but if you don’t… bleh, no worries.
June 2, 2008 at 10:05 am
This is a lovely technique. I’ve used this on my cousin’s site where the inspiration came from your frog site. The reduction of div’s keeps your site manageable. Good post!
June 2, 2008 at 10:34 am
HA! nice, my history of the frog endeavor. I’m glad someone saw it!
Riveting content there… RIVETING.
June 3, 2008 at 3:32 pm
gravatars just added
June 3, 2008 at 3:33 pm
yay gravatars!!!
June 10, 2008 at 3:27 am
i’m not sure about this, but i read that in “real” XHTML content type you can’t style the body element. can you please elaborate on this subject?
June 11, 2008 at 9:44 am
@serge IF you check out the Firefox CSS file (do a search for html.css on your computer), you can see a list of all the “stylable” elements. You’ll even see elements like style, head, script…, things you wouldn’t think to style.
where did you read that?
June 12, 2008 at 2:11 am
Hi.. I Put this link in a forum cause I would like some ideas.. I am starting css.. so I would like to discuss this. Here is what a member said:
is
“body and html would only work if you are wanting to have all of your site fixed width and centered. For example if you wanted your main content centered and then the header and footer to span 100% across the page then they won’t with this technique as you have restricted the width of your body or html, so 100% is only what you have set it to.”
Does this make sense ?
June 12, 2008 at 5:45 am
thanx for reply.
i came across it several times in the context of the debate of whether XHTML with text/html MIME type should be used. last time i remember it was here: XHTML is not for Beginners. “no special treatment for the body element” he had written, but did not provide any more details..
June 13, 2008 at 2:34 pm
@Daniel
Yea, that’s mostly true. The only thing that’s different is that the width doesn’t have to be fixed, it could be elastic too.
you can put a background image or a top border on your html element, if you just want something spanning the page. But if you want the header 100%, then yea, this wouldn’t be the best way to go. But you still don’t need a page wrapper div. You’d just set a width and margin:auto on your content div and let the header stretch.
June 14, 2008 at 11:51 am
Hi Tim..
I am interest in this subject.. cause I am new with CSS. Can you gimme an example about what talked. As.. how span 100% the header and/or footer ?
Thanks !
June 14, 2008 at 12:23 pm
Hey Daniel,
Try this:
http://www.csskarma.com/lab/headerstretch/
Lemme know if you have any questions.
June 15, 2008 at 8:41 am
Hi Tim..
Thank you!
June 25, 2008 at 9:26 am
[...] couple weeks ago I wrote a post called “Styling your body” which attempted to break the convention of using a “container” or [...]
June 26, 2008 at 3:40 pm
[...] styling-your-body (tags: http://www.csskarma.com 2008 mes5 dia26 at_tecp body CSS dica blog_post) [...]
August 4, 2008 at 12:01 pm
[...] article that caught my eye while visiting CSS Karma tries to get those of us (Yes, I’m guilty) who by habit create a [...]
August 6, 2008 at 1:21 pm
[...] Styling Your Body - Usually we don’t style our body or html tag. We can style every element we would like, but [...]
September 27, 2008 at 7:11 am
Thanks ! Nice to meet you