If you set one color, set them all

As a lark, I changed the default colors in my Firefox browser to have a black background as the default, and red text as the default foreground color.

user_pref("browser.display.background_color", "#000000");
user_pref("browser.display.foreground_color", "#ff0000");

There was no real point to this, red on black isn't easy on the eyes, and most sites use CSS to style their pages.

However, many sites, many many many sites, appear to change one style (the background color typically) without changing the foreground style (the color attribute in CSS).

If you're going to change the color of either your text (using color: or your background (using background:) then you must set both colors, otherwise you'll get unexpected results.

The best benefit of this little excercise? I discovered that on my own sites I'd carefully set colors for all sorts of elements and classes, but not the default color for text.

Following are some screen shots of random sites I read which have set one, but not both background and foreground colors. The browser in use is Firefox 1.0.4 on Microsoft Windows XP.

Yahoo.com

Yahoo! sets colors for text items and the background colors for various divs and sections, but not the background color for the page. Screenshot of Yahoo.com

Washington Post

The Washington Post site sets background and foreground colors for its homepage, but does not set a foreground color for article pages: Screenshot of Washingtonpost.com

Sixapart.com / Movabletype

The MovableType site doesn't set a default foreground color for text, so you get my setting of red: Screenshot of MovableType/SixApart

iaslash.org

IASlash sets a foreground color (some setting of grey?) but no background color: Screenshot of iaslash.org

I've posted additional screen shots on flickr (which, btw, does not set a default color for text elements).

Some sites seem to have the colors set on entry pages, but not on article or content pages (or error pages).

Posted in Webmastery

202: Accepted Archives

Feed icon We use Feedburner to distribute our web feeds: 202 Accepted Feed

feedburner graphic
Google

Copyright 2002–2011 Artific Consulting LLC.

Unless otherwise noted, content is licensed for reuse under the Creative Commons Attribution-ShareAlike 3.0 License. Please read and understand the license before repurposing content from this site.