|
||||||||
|
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.
The color referencing methods that CSS provides are:
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.
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.
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.
That's the end of this part of the RichInStyle.com CSS masterclass; to continue to the next section, click here.
Copyright © RichInStyle.com 2000; all rights reserved. See copyright document for terms of use. Please visit Bukit Lawang flood appeal.