Always Specify A Background Colour
Avoid a mix of unwanted colours on your page.
11 January 2007 · Last updated: 27 January 2007
Comments
It's a good idea to always specify the background colour in the styles for your page. Why? Because many browsers allow you to change the default background colour, which is usually white. I recently changed my browsers to a different colour and was amazed at how many websites were now displayed with that colour as part of the main background. A lot of pages seemed to apply a white background only in certain areas, so the result was a mix of colours. This included many of my own pages from the past! I realised that, were I to choose a dark colour for the background, the text on many websites would become unreadable. So it makes sense for authors to apply both a background and a text colour to the main elements, <html> and <body>. The code to apply a white background with black text would look like this:
html, body {background-color:#fff; color:#000;}
Here are examples of how a few sites looked after I changed the background colour in my browser to yellow. Oh dear! Not quite what the designers had in mind!
Apple Education
Useful Info
EMAIL: www.designdetector.com (replace the 1st dot with "@")
NEWSFEED: Subscribe to news of fresh posts and site updates. (RSS 2.0 compatible newsreader required.)
Disclaimer
Some links on this website lead to information provided by external services not under my control, therefore I am not responsible for the content or accuracy of the linked information.
All code examples are not guaranteed 100% free from bugs and/or mistakes. Use them at your own risk. I do not take any blame should a problem occur relating to use of code on this site given as an example for your own use. Such code has been tested and found to work for me, but I cannot vouch for other computer systems (existing now, or in the future) which it may be used on, or changes you introduce yourself based on my code.
This website is © 2008 Christopher Hester, except where separate authors are named. No part of this website may be reproduced or re-used in any way without my prior permission, except content added from separate authors (who retain the copyright on their material), examples of code, and any other content I explicity state is free to copy and make use of.
This page was last updated on 27 January 2007.
Comments (5)
Please send any comments in via email and I'll publish any suitable ones here.
Totally agree... big pet peeve of mine since I have a gray background on my browser. I see lots of sites that look awful because of this simple lack of color specification.
Sent in by email on 16 January 2007 ¶
I believe that this code:
html, body {background-color:#fff; color:#000;}can be written as
body {background-color:#fff; color:#000;}or even
html body {background-color:#fff; color:#000;}I just don't understand for what stands for
html, body ...Why do you use the ',' ?
Sent in by email on 21 January 2007 ¶
Why the comma? Because you can style the HTML element separately, not just the BODY. So to avoid an unwanted mix, I style both.
Posted on 21 January 2007 at 8:13 pm ¶
I had specified background & text colors, but text colors only when I wanted them to differ from the default black on white. Incorrectly assuming that they would always remain in this default state.
Thanks for the tip!
I am trying to learn PHP and have been reading your article on PHP flat files. I am looking forward to using that information in a future project.
Sent in by email on 21 January 2007 ¶
Most current browser have the "browser" stylesheet set to white, but I think [from memory] that Netscape 4 had it set to a medium grey. So you should always explicitly set it.
Also 'background-color:#fff' can be shortened to 'background:#fff'
Sent in by email on 25 January 2007 ¶