What color is your body?

Posted on Aug 26, 2009 in Web Dev | 0 comments

You’re sporting a killer hat. Wearing the best pants you own. Perfectly-matched belt. Ditto for the shoes. Everything, from your stylin’ shades to you bangin’ watch, is just right to complete your look. Then you go out and hit the town… most people admire you but some stare and chuckle. What’s wrong, you wonder? Then, with a shock, you realize: you’re not wearing a shirt.

That’s what it’s like when web developers, who have nearly universal control over the user experience, don’t bother to style their body tag. The body tag, as the primary container for a your content, is equivalent to the painter’s canvas or the writer’s page.

In the analogy above, I wrote that only some stared and chuckled. That’s because web browsers all rely on a default stylesheet to render content if that content doesn’t include any of its own style information. That default sets text to black and the background color to white. While the vast majority of users never change that default (or know it exists, for that matter), some do; perhaps for accessibility reasons (a white background provides too much contrast, maybe?).

If only a few people notice it, what’s the big deal? There are a few reasons why styling the body tag matters:

1. What else might you have forgotten? – Styling the body tag is more than just about background color. Different browsers have varying defaults for page margins, padding, and font settings. If you’ve not set a background color you’ve probably not configured those design elements, either. Sure, you might have styled your paragraph or div tags, but styles cascade down from the body so it should be given the defaults you want.
   (It’s a good idea to start from a clean slate, and employing one of the many CSS frameworks’ “reset” stylesheets is an easy way to do that.)
2. Protect your design – Every other aspect of your design is thought out (right?), so why leave your page’s background color to chance, especially when the fix is so simple and the consequences so unappealing (see images below)?
3. Respect your elders – Older browsers (I’m looking at you, Netscape 4.7!) defaulted the body’s background not to white, but to gray.

So how do you fix it? First, if you’ve read this far in the post and not fallen asleep you likely know enough about web development to answer that question. But for the sake of completeness, here’s two ways to do it (the color, of course, doesn’t have to be white or its hexidecimal equivalent, #FFF):

1. Old-school HTML method –
2. Proper CSS-based method – (in your external CSS file or in a style declaration in your page’s head) body { background-color: #FFF;}

If you don’t set your body tag, at least you’re in good company. Since I set my browser’s default background color to something other than white (I was doing some web services development and looking at a lot of unstyled content), I noticed many prominent websites neglect this point. I present this gallery of bodily shame for your enjoyment. All screen captures were taken in August 2009.

• http://www.washington.edu/admin/hr/benefits/insure/fac-staff-lib/meddent/open-enroll.html
• http://depts.washington.edu/uwtscat/
• http://www.popularmechanics.com/technology/military_law/4325774.html
• http://www.komonews.com/
• http://www.superstock.com/
• http://www.wetpaint.com/
• http://www.aircanada.com/
• http://www.nafta.com/ (Network Solutions’ domain-parking screen)
• http://www.google.com/analytics/ (login required)

Related: If you liked this, check out:

1. Which body parts are most important for fighting? What are the most important body parts for fighting? (More...
2. Web 2.0 quiz Update: had two “entries” on this quiz: surprisingly, one of...
3. Little-known CSS selectors Anyone worth his or her proverbial web development salt knows...
4. Perfect moments This post may sound like the title of an Oprah...