Setting Font Colors Using the Standard 16 Color Names

The HTML 4 specification lists 16 color names that can be used as values of the FONT element's COLOR attribute to specify colors in Web pages: black, white, aqua, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, and yellow. A font color is set using a color name in the following manner:

<font color="colorname">nested text</font>

To see the colors set by the standard color names (other than black and white), just open fontcolors.html in your browser from the MyHTML folder (see Figure 4.19):

Figure 4.19: 16 standard color names can be used to set font colors (black and white not shown).

Use one of the 16 color names to set a color for the H1 element's text (see Figure 4.20):

<h1 align="center"><img src="goodegg.gif" width="400"
height="267" alt="The Good Egg Company banner image"
align="middle"><br><font color="red"><font size="7">E</font>gg
<font size="7">F</font>acts and <font
size="7">F</font>igures</font></h1>

Figure 4.20: The H1 element is displayed in a red color.

You may wonder why there is no "orange" color included with the standard color names. That is because the 16 standard color names correspond to the original 16-color VGA display (introduced with IBM's PS/2 line of computers), which did not have an orange color in its color palette, but had to combine yellow and red to display orange.

Setting Font Colors Using RGB Hex Codes

Setting the font color using RGB hex codes involves specifying values from 0 to 255 (00 to ff, in hexadecimal) for the red, green, and blue components of a color, providing you with a grand total of 16.7 million colors from which to choose. The hexadecimal numbering system uses 16 base numbers (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, and F). Programmers like to use hexadecimal numbers, because it lets them specify numbers from 0 to 255 using only two-digit numbers (00 to FF). The hexadecimal equivalent to the decimal value of 159, for instance, is 9F.

You set the RGB hex code for a color in the FONT element in this general form, where rr is the hex value for red, gg the hex value for green, and bb the hex value for blue:

<font color="#rrggbb">nested text</font>

For instance, a red color here can be specified as #ff0000, a lime-green color as #00ff00, and a blue color as #0000ff. (ff is the highest hexadecimal number, equaling 255, whereas 00 is the lowest, equaling 0.) To see examples of colors set using RGB hex codes, just reopen fontcolors.html in your browser from the resources folder in your MyHTML folder (see Figure 4.21):

Figure 4.21: RGB hex codes can be used to set up to 16.7 million possible colors.

RGB hex codes can be used to set up to 16.7 million possible colors.

Click your browser's Back button to return to the tutor3.html example file.

Use RGB hex codes to set colors for the initial H2 and H3 elements (see Figure 4.22):

<h2><a name="safety"></a><font color="#336699">Egg Safety and
Quality</font></h2>
<p>All foods have the capability of carrying microorganisms
that can cause disease or illness. Common symptoms of food-
borne illness include nausea, vomiting, diarrhea, cramps,
headache, and fever. While the risk of getting sick from eat-
ing eggs is relatively low, following are some tips for
reducing the likelihood of contracting food-borne illness
from eating eggs:</p>
<h3><a name="salmonella"></a><font
color="#cc6600">Salmonella</font></h3>

Figure 4.22: The initial H2 and H3 elements are set to display in "slate blue" (#336699) and "rust orange"(#cc6600) colors, respectively.

Showing you how to count in hexadecimal or explaining how an RGB color scheme works is beyond the scope of this book. Quite frankly, unless you already know how to count in hexadecimal and have an understanding of RGB color theory, the only practical way to choose the hexadecimal color code you want is to use some kind of color chart, wheel, or cube that lets you select the color you want, along with the corresponding hex code. See "Finding Online Color Charts" later in this session for links to where you can find online color charts, wheels, or cubes.

Selecting Colors from the Web-Safe Palette

When a system is limited to displaying 256 colors, it uses dithering to display a color that is not part of its system palette, by combining the pixels from two or more colors present in the system palette in order to try to trick the eye into perceiving the desired color. Although this sometimes works, often the result is a grainy, splotchy color that only remotely resembles the desired color. The Web-safe palette is composed of 216 colors that should be present in most systems' 256-color palettes and, thus, should not be dithered on a system limited to displaying only 256 colors. If you stick to specifying hexadecimal codes 00, 33, 66, 99, CC, and FF when inserting RGB hex codes, you'll be selecting colors from the Web-safe palette, thus helping to ensure that your page displays fine on 256-color systems. You'll also reduce the number of colors from which you must select to 216.

Finding Online Color Charts

A number of places on the Web have color cubes or charts that show you all the browser-safe colors and their RGB hex codes. Here are a few of the best:

• Victor Engel's No Dither Netscape Color Palette at the-light.com/netcol.html

• FIND IT ONLINE
  Doug Jacobson's RGB Color Chart at www.hypersolutions.org/pages/rgbhex.html

• Generating Colors in HTML at www.utexas.edu/learn/html/colors.html

Many HTML editors also have color pickers, which let you choose the color that you want to use and then insert the RGB hex code into your Web page for you. Generally, however, they don't identify the browser-safe colors. At least one image editor, Jasc Paint Shop Pro, provides the RGB hex code for any color you select in its color picker.

Changing Font Faces

You can specify a font face for nested text by using the FONT element's FACE attribute. This attribute was originally a Microsoft extension (the SIZE and COLOR attributes were originally Netscape extensions), but was included as a standard part of HTML with HTML 4.0. With the FACE attribute, you can specify a single font face or a list of font faces in which to display nested text.

Specifying a Single Font Face

Use the FACE attribute to specify that the H1 element should be displayed in an Arial font face (see Figure 4.23):

<h1 align="center"><img src="goodegg.gif" width="400"
height="267" alt="The Good Egg Company banner image"
align="middle"><br><font color="red" face="Arial"><font
size="7">E</font>gg <font size="7">F</font>acts and <font
size="7">F</font>igures</font></h1>

Figure 4.23: The H1 element is displayed in the Arial font face, if available.

A primary limitation of the FACE attribute, however, is that a font must be present and available on a user's system before it can be displayed. If a user's system doesn't have the Arial font installed, the default font will be displayed instead, most likely a variant of Times or Times New Roman.

Specifying a List of Font Faces

The FACE attribute can also specify a list of font faces, which is at least a partial way around this limitation. If the first font face is not available on a system, a second font face listed may be; if that font face is not available, a third font face might be. Add a FACE attribute for the initial H2 element, listing Verdana, Arial, and Helvetica as the font faces (see Figure 4.24):

<h2><a name="safety"></a><font color="#336699" face="Verdana,
Arial, Helvetica">Egg Safety and Quality</font></h2>

Figure 4.24: The H2 element is displayed in the Verdana font face, if available.

Specifying a Generic Font Family Name

In HTML 4, you can also specify a generic font family name (taken from CSS) with the FONT element's FACE attribute as a fallback in case none of the listed fonts are available. They are serif, sans-serif, monospace, cursive, and fantasy. Of these, however, only the first three should be used, since the last two, cursive and fantasy, produce widely varying results depending on the browser being used. Add the sans-serif generic font face name to the font face list you created in the previous section:

<h2><a name="safety"></a><font color="#336699" face="Verdana,
Arial, Helvetica, sans-serif">Egg Safety and Quality</font>
</h2>

Caution

When specifying font face lists, one or more TrueType fonts should always be listed in front of any PostScript fonts that are listed. That is because some Windows systems will either not display PostScript fonts at all (defaulting to the default font face) or only display the lower-quality bitmapped, but not the hinted vector-based, letter forms of PostScript fonts. The most commonly available PostScript fonts include Times, Helvetica, Palatino, and Courier.

FIND IT ONLINE
Microsoft previously provided for download a collection of TrueType core fonts for the Web, which could be downloaded and installed on Windows, Macintosh, and Unix/Linux systems. These same fonts are included with the most recent versions of both the Windows and the Macintosh operating systems. While Microsoft no longer provides these fonts for download, Linux users can find them available for download, and instructions for installing them, at corefonts.sourceforge.net/. To see a selection of font faces that are available on many Windows systems, open fontfaces.html in your browser from the resources folder in your MyHTML folder (see Figure 4.25).

Figure 4.25: A selection of fonts available on many Windows systems is displayed.