Always Specify A Background Colour
Avoid a mix of unwanted colours on your page.
11th January 2007 · Last updated: 5th October 2016
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
Comments (5)
Comments are locked on this topic. Thanks to everyone who posted a comment.
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 16th 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 21st 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 21st 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 21st 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 25th January 2007 ¶