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.
You can leave a response, or trackback from your own site.
« A True CSS Table | Quick iPhone Media Detection »
|
Comments (17)
|
Trackbacks & Pingbacks (4)
-
[...] couple weeks ago I wrote a post called “Styling your body” which attempted to break the convention of using a “container” or [...]
-
[...] styling-your-body (tags: http://www.csskarma.com 2008 mes5 dia26 at_tecp body CSS dica blog_post) [...]
-
[...] article that caught my eye while visiting CSS Karma tries to get those of us (Yes, I’m guilty) who by habit create a [...]
-
[...] Styling Your Body – Usually we don’t style our body or html tag. We can style every element we would like, but [...]
Leave a Reply
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.”
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.
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!
HA! nice, my history of the frog endeavor. I’m glad someone saw it!
Riveting content there… RIVETING.
gravatars just added
yay gravatars!!!
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?
@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?
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 ?
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..
@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.
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 !
Hey Daniel,
Try this:
http://www.csskarma.com/lab/headerstretch/
Lemme know if you have any questions.
Hi Tim..
Thank you!
Thanks ! Nice to meet you
it’s true, there are a lot of instances where people can cut out container divs.
unfortunately, the margin:0 auto; doesn’t work in IE6… and so long as ie6 is on yahoo’s graded browser support list, i’ve gotta support it as well!
Hi Christy, are you thinking of IE5.5? I’ve never had a problem with this not working in IE6.
you do, however have to set the text-align:center in html{} and then align it left in the body. But that goes with any center aligning for IE6