Tutorials Bugs Masterclass Free stuff Test pages Proposals

RichInStyle.com - Style sheet master class: part 7 - color and backgrounds



CSS issues

Color referencing methods

Color differences

Major browser issues

Useful tools

Background color changer

Decimal to hex converter


The issue of applying color to pages is fortunately one less fraught with difficulties than some of the earlier sections of the master class.

However, the problem of selecting the best color/background combination is a tricky one, and one with which many people have trouble. It is difficult to offer any hard and fast rules, save that you should always take care that the combination you choose is readable - some color schemes, while very attractive, can be very hard on the eyes.

To see whether the color scheme you have chosen is suitable, try setting it up as your user style sheet (requires Opera or Internet Explorer (Internet Explorer 3 requires RichInStyle.com's free installation file)), and then viewing every web page with it - if you find that you tire of it, your users will too, and therefore you shouldn't use it.

As a general rule, you should think very carefully before setting your color scheme to anything other than black on white, and conversely, if you want black on white, you should always set this explicitly.

Aside from this, it is difficult to offer any advice as to the best color scheme, as it is all a matter of taste; but be careful with garish colors as they soon grate. In order to decide upon your color scheme, I recommend that you use RichInStyle.com's web-safe color maker. This presents all 216 colors in a grid. If you see a background color that you like, click on it and then see how it looks with each of the 216 colors as a foreground color.

CSS issues

The color referencing methods

The color referencing methods that CSS provides are:

  1. Named colors. Those that are defined are:
    1. Aqua
    2. Black
    3. Blue
    4. Fuchsia
    5. Gray
    6. Green
    7. Lime
    8. Maroon
    9. Navy
    10. Olive
    11. Purple
    12. Red
    13. Silver
    14. Teal
    15. White
    16. Yellow
  2. Various ways of specifying colors on an rgb basis:
    1. 6 digit positive hexadecimal number preceded by a compulsory hash ('#'); the first 2 numbers referring to the red component, the second 2 to the green and the third to red. For example, color: #FF6699 refers to a color with red component of FF (maximum), green component of 66 and blue component 99.
    2. 3 digit positive hexadecimal number preceded by a compulsory hash - equivalent to the 6 digit form except that the omitted number is the same as the specified one - color: #F69 refers to the same color as color: #FF6699
    3. 3 base-10 integers, separated by commas and enclosed in rgb(). For example, color: rgb(255, 102, 153) is equivalent to color: #ff6699.
    4. 3 percentages (to not more than one decimal place). For example, color: rgb(100%, 40%, 60%) is equivalent to #FF6699.
  3. User-interface colors. These are equivalent to that setting in the user's UI (N.B. the capitals below are purely cosmetic as CSS is entirely case-insensitive):
    1. ActiveBorder; the color of the border of an active window
    2. ActiveCaption; the color of the caption (title) of an active window
    3. AppWorkspace; Background color of the app's multi-document-interface
    4. Background; desktop background
    5. ButtonFace; Button background
    6. ButtonHighlight; Dark shadow color
    7. ButtonShadow; Button shadow color
    8. ButtonText; Button text color
    9. CaptionText; color of text in captions, size box and scrollbar arrow box
    10. GrayText; color of disabled items
    11. Highlight; background color of a selected item in a control
    12. HighlightText; text color of a selected item
    13. InactiveBorder; color of the border of an inactive window
    14. InactiveCaption; the background color of inactive captions
    15. InactiveCaptionText; the text color of inactive captions
    16. InfoBackground; tooltip background color
    17. Menu; menu background color
    18. MenuText; menu text color
    19. Scrollbar; the area in which the scroller is dragged
    20. ThreeDDarkShadow; the dark shadow of 3d display elements
    21. ThreeDFace; the background of 3d display elements
    22. ThreeDHighlight; the dark shadow of 3d display elements
    23. ThreeDLightShadow; the light shadow of 3d display elements
    24. Window; window background
    25. WindowFrame; window frame color
    26. WindowText; window text color

The main trouble with these is that the most intuitive method, named colors, only has 16 colors defined (excluding common colors such as orange) (some browsers define others, but you should not use these as only some browsers support them, and it is pointless to unnecessarily exclude them). The two rgb() methods do avoid difficulties that people may have with hexadecimal, but suffer from Internet Explorer 3's non-support for them (of which, see more below).

The user interface colors are rarely any use for setting the backgrounds/text colors of pages, but principally for styling form elements. In addition, they are only supported in Internet Explorer 4 and 5.

However, a bigger problem arises from the fact that it is difficult to think of colors in terms of components of red, green and blue.

There is little that can be done to cope with the first of these problems except to use the web-safe color maker, which although only covering 216 colors, is actually improved by this fact, since it allows you to get a color that is close to ideal, which can be fine-tuned.

I would strongly recommend that you use the three digit hex color in preference to all others, since it is easiest to maintain and enjoys universal browser support.

As to the color and background properties, you should be aware that it is recommended that whenever you set color, you should set background as well. This is designed to ensure that no conflicts are caused between your style sheet and the browser or user style sheet. This is of greatest importance on BODY, where it is common to set only background: white, failing to observe the fact that the user might have color: white; background: black, thereby resulting in the page being rendered illegible.

Color differences

Sadly, the same color declaration will not be rendered the same in different browsers, platforms or monitors. There are typically major differences between Macintosh and PC browsers, and perhaps most significantly between Netscape and other browsers.

Colors rendered in Netscape tend to look washed out in comparison to Internet Explorer and Opera, and as a result, it is recommended that you test your colors on as many browsers and platforms as possible to ensure that each rendering is to your taste.

Major browser issues

By far and away the biggest issue affecting style sheet users in relation to color is that of Internet Explorer 3 for Windows' lack of support for backgrounds on TABLE, FORM, TR, TD, TH, BODY and HTML in LINKed style sheets. This is a very serious issue, since foreground colors are frequently dependent on the corresponding background color. However, if you have followed RichInStyle.com's guide to supporting older browsers, this won't be a problem, as you will have set the bgcolor and text attributes on the <BODY> tag.

If, however, you have neglected to do this, you have no choice but to hide color declarations from IE 3 that are dependent on an accompanying background. For example:

/* In linked style sheet */
BODY {color: white;
background: black}

Becomes if you are using separate style sheets for each browser:

ie4.css, ie5.css, nn4.css, nn5.css, op3.css:

BODY {color: white;
background: black}
all.css, ie3.css, ie30.css:

If you just use one style sheet, you should do:

BODY {color: white !important;
background: black !important}

This will hide both declarations from Internet Explorer 3 (for more on hiding from IE 3 and Netscape, see RichInStyle.com's guide to cross-browser style).

The second problem is in Netscape's support for colors. It will destroy the user interface colors, inherit declarations and background declarations of transparent.

The third problem is that Internet Explorer 3 does not apply backgrounds to block elements, but only to the text content.

The fourth problem is that Internet Explorer 3 for Windows does not support any of the background properties except for the background shorthand. As a result of this and the other IE 3 bugs, I would recommend that you do not specify any backgrounds for IE 3 at all (by hiding using !important or by separate style sheets), but instead rely on the BODY tag's attributes.

The fifth major problem relates to Netscape - when you use the background shorthand, if you do not specify a color, Netscape specifies black. As a result, you should always specify a color.

These are all the main bugs, but there are others, most notably with background positions. If you require more information, please consult RichInStyle.com's browser bug pages.

Useful tools

Background color changer - enter a 6 digit rgb code (e.g., #ff0000) to change the page background

Decimal to hex converter - enter a number between 0 and 255.

That's the end of this part of the RichInStyle.com CSS masterclass; to continue to the next section, click here.