| Previous | Table of Contents | Next |
In this lesson, you learn how to add visual appeal to your web pages by applying colors to the text and backgrounds of your HTML elements.
The creative use of color is one area of web page design that has surpassed the print publishing medium. Four-color printing processes are so much more expensive than simple monochrome techniques that color printed pages are usually reserved only for situations that demand them. When you are serving documents over the World Wide Web, however, a colored pixel costs no more than a black one, so authors are free to create color effects that would normally not be attempted in printed media.
Of course, there is a distinct backlash to this newly found freedom. Just as digital font technology tends to entice over-zealous designers to use too many different fonts on a single page (producing the ransom note effect), the sudden availability of color may lead some web designers to excess.
Style sheets might even be guilty of fueling this phenomenon because they provide new capabilities. It has always been possible to globally assign colors to a page’s text and background, but with styles, you can now apply a color to the text or background of any HTML element.
One of the first practical uses is to create separate sections within a document that are distinguishable by their background color. Many of the style sheet samples, already available on the web, use a table to create an enclosure within the <BODY> of a document that contains the page’s entire contents. By making the table somewhat smaller than the canvas and using contrasting colors for the <BODY> background and the table cells, the document can easily take on the appearance of a page, as shown in Figure 15.1.
)
Figure 15.1 Styles permit
backgrounds of different HTML elements to be assigned different
colors.
This technique is used to create other designs as well. After creating table cells with different background colors, you can use colored headline and paragraph text elements with negative margin values to make them span the cells.
Individual text selections consisting of either block or inline elements can also be assigned different colors. You can contrast your headlines from your body text, or use color as an alternative to bold or italics to emphasize inline text selections.
It has long been possible to assign a color value to a web page’s text by using the TEXT= attribute in the <BODY> tag. This attribute causes all of the text on the page to be the same color. An exception is for link text that you learn about in Lesson 17, “Using Pseudo-Elements and Pseudo-Classes.” Recent additions to the HTML language now permit you to set the color of any selected text with the <FONT> tag.
There is nothing about style sheets that stops you from using these features. You can replace the TEXT= attribute and your inline <FONT> tags with a style that uses the color property to assign a color value to text. You can apply the same property to any other element in a web page to permit variation of text colors.
The color property is notated like any other CSS1 property. It takes a value that represents the desired color, by using one of the following notations:
A rule containing the color property will appear like one of the following (all of which specify the same shade of blue):
H1 {color: blue}
H1 {color: #00F}
H1 {color: #0000FF}
H1 {color: rgb(0,0,255)}
H1 {color: rgb(0%, 0%, 100%)}
The color property is inherited. Unstyled text displays using the default browser color (which is black), or a color specified using the <BODY> or <FONT> tag.
Specifying Keyword Values
The simplest way to specify a color value is to name the color desired but this also provides the most limited range of colors. The keywords that are permitted represent the basic 16-color VGA palette of the Windows operating systems. They are as follows:
| black | navy | maroon | blue |
| aqua | purple | gray | green |
| fuchsia | lime | olive | red |
| silver | teal | yellow | white |
Specifying RGB Values
The other, far more flexible method for defining colors is to specify the individual RGB (red, green, and blue) values that can be combined to form the final color. The number of colors that can be created by adjusting the proportions of red, green, and blue is virtually infinite. The limiting factors are the method by which you notate the proportions and the capability of the medium on which they are displayed. You can freely mix RGB and keyword color values in a document, as needed. However, if your readers are viewing your pages using the standard 16-color VGA Windows video driver, you should stick to colors named by keywords.
You can specify RGB values for the color property as hexadecimal or standard decimal numbers. Hexadecimal is the standard form that you may have used when specifying color values in traditional HTML codes.
A hexadecimal color specification consists of three or six digits with 16 possible values from 0 (zero) to F. The digits are divided equally into red, green, and blue (in that order), with F being the highest proportion of that color. In the sample color rules shown earlier, the second and third examples both indicate the same blue color.
#00F indicates a full measure of blue, with no green or red. With a single digit, there are sixteen possible gradations for each color element, or 4096 possible color combinations.
#0000FF indicates the same blue, but uses two digits for each color, permitting 256 possible gradations for each. This increases the number of possible colors using this system to 16,777,216. You can either use the single- or double-digit notation for any color property, although double-digit is more common.
For example, the double-digit hexadecimal values for the 16 VGA colors are shown in the following table:
|
| |||
|---|---|---|---|
| Color | Hexidecimal Value | Color | Hexidecimal Value |
|
| |||
| black | 000000 | navy | 000080 |
| maroon | 800000 | blue | 0000FF |
| aqua | 00FFFF | purple | 800080 |
| gray | 808080 | green | 008000 |
| fuchsia | FF00FF | lime | 00FF00 |
| olive | 808000 | red | FF0000 |
| silver | C0C0C0 | teal | 008080 |
| yellow | FFFF00 | white | FFFFFF |
|
| |||
The problem with this notation system is that most people are not accustomed to working with hexadecimal numbers and they are not familiar with the RGB color scale. One way around this problem is to find a tool that allows you to mix colors while providing the hexadecimal RGB values for the result, such as the example shown in Figure 15.2.
The same color precision is provided by the decimal notation method because 256 is the decimal equivalent of the hexadecimal FF. You can also use percentages that provide a lesser degree of control but are more than adequate.
There are many more applications that display RGB color values as decimals or percentages than there are hexadecimal ones. Even the Paint program included with Windows 95 and Windows NT 4.0 can display them. To do this, select Edit Colors from the Options menu and then click the Define Custom Colors button.
Explorer Support Internet Explorer 3.0 does not support the notation of color values in the RGB() decimal or percentage formats.
Unfortunately, the enormous number of colors that you can specify in your styles doesn’t mean that the browser can display them all properly. When you want to be certain that your readers are seeing exactly the same colors that you have selected, you are limited by the Internet Explorer to a palette of 216 colors. Color values not on the Explorer palette display using the nearest available palette color.
The same color notation techniques used on text are also used to apply color to the background on which the text is placed. You can apply the background property to any HTML element, block, or inline, as follows:
)
){kind=link}
){kind=link}
P {background: red}
P {background: #FF0000}
The background property is not inherited by child objects. However, a child object has a default background value of transparent, which allows the parent’s background to show through.
When a background color is applied to a block element, the CSS1 standard specifies that the color should extend through the padding of the block, and up to the rectangular border (the color of which is set with the border property).
Internet Explorer 3.0 does not support the padding property defined by the CSS1 standard so background colors assigned to certain block elements (such as <P> elements) cover only the immediate area on which there is actual text. This leaves irregularly shaped blocks instead of rectangular ones (see Figure 15.3).
)
Figure 15.3 Current support of
the CSS1 standard by the Internet Explorer causes the background property
to be applied improperly.
Additional leading added by the line-height property also can cause breaks in the background color between lines, as shown in Figure 15.3’s second paragraph. Elements that have established boundaries, such as table cells, display backgrounds properly.
In this lesson, you learned how to assign color values to the text and background of your documents. In the next lesson, you learn how to create more elaborate background effects.
 |
 |
 |
){kind=link}