You can use color for text, background, or both. You can use color in combination with other font modifications, such as italics or large type.
Color appears on computer monitors through variation in the amount of red, blue, and green that is used. There are various ways to instruct the monitor to mix red, blue, and green. The one that we will use specifies a color as something like #ff0000, which is the color code for maximum red.
The color code starts with a # sign, followed by six digits. The first two digits specify the amount of red, the second two digits specify the amount of green, and the third two digits specify the amount of blue.
Each digit could have any one of 16 values: 0-9 or a-f, with 0 the smallest and f the largest. However, only certain two-digit combinations are "browser safe," meaning that you can rely on the color appearing the same in most browsers on most operating systems. The safe two-digit combinations are 00, 33, 66, 99, cc, and ff.
Once, I used an unsafe color code for background on homefair.com, my commercial web site, because it gave a lovely tan on my machine. However, people who looked at my site on a Macintosh were irate: the background that they saw was purple, and it made the text unreadable! If you really become attached to an unsafe color to use as background, you need to put it into an image. Colors in images are more reliable across browsers than color codes.
Here is a table with two sample colors:
| color code | sample |
|---|---|
| #ffcccc | |
| #ffffcc |
For a complete listing of all of the color-safe color codes, see The WDVL color cube. Or do a search on the Web for "color picker" or "browser safe colors."
Pick out four or five of your favorite colors. Then put them into a table like the one above. Here is the code that I used to make the table:
Tables often benefit from an alternating color scheme. This is illustrated below, where we sketch a shoe catalog.
| Description | Price |
|---|---|
| Men's running shoe, white | $49.95 |
| Women's basketball shoe, red | $79.95 |
You will find that the sites that look the best tend to make very conservative use of color. Once you have three or more strong colors competing on a page, it looks pretty bad. Also, "Goth" pages--where the background is so dark that the text has to be white or yellow to be legible, are almost always bad. The lighter pastels create a much more pleasant atmosphere.
You can use an image as a background graphic, either for the whole page or for part of a page. To use an image, you have to specify the web address, or url, where that image can be found. Here is an example (note that the actual complete web address for the image is http://arnoldkling.com/webdesign/images/postextb.gif):
.backpostex{
background-image:
url(../images/postextb.gif);
}
<div class = "backpostex">
Alternatively, we can use the image as background for an entire block.
time</div>
The default characterstic of background image classes is that they repeat. That is, you can use a really small image, and if the block of text that you want to put over the background is larger, the browser will repeat the image enough times to fit behind the entire block. You can over-ride the default by specifying no-repeat (see the Quick Reference).
Finally, you can use a background image behind an entire web page. To do this, you use the <body> tag. In this example, you could go with <body class = "backpostex" >. Alternatively, you could leave the <body> tag plain and instead specify the background image on your style sheet.
Note that when we use this method of over-riding the default settings for the <body> tag, we do not use a . in front of the word body. On a style sheet, the dot is used to indicate that we are making up our own html tag. When we are using an existing tag, we do not use the dot.