Maddog's HTML Primer for Real People

Chapter 5, Lesson 3

Ch 5, L 3 - Font Color

If you already know how to use attributes to specify font color, you can skip this lesson.

In a previous chapter, we discussed the '' tag pair. You might also recall that we used the 'SIZE=" attribute with the 'FONT' tag to adjust font size. Now, we want to introduce a new attribute for the same tag, the "COLOR" attribute. The syntax for using the font tag with a color attribute is:

With this knowledge, we could be dangerous! Let's say that you're an "aggie" from Texas A&M, and 'maroon' just happens to be your favorite color. You wear maroon sweaters, dye your hair maroon, and color your mashed potatoes the same. Now that you're building a web page, you must- simply must- have maroon text. Looking up the color 'maroon' in the 16-color pallette, you see that the RGB-code is '#800000'. After commiting that to memory by saying it aloud one thousand times, you build your tag:

We'll demonstrate each color of the 16-color pallette, by writing it's color name in its own color. Check out the source code:


<B>
<FONT Color="#000000">black</FONT> 
<FONT Color="#FFFFFF">white</FONT> 
<FONT Color="#C0C0C0">silver</FONT>      
<FONT Color="#808080">gray</FONT> 
<FONT Color="#FF0000">red</FONT>       
<FONT Color="#800000">maroon</FONT> 
<FONT Color="#FF00FF">fuchsia</FONT>      
<FONT Color="#800080">purple</FONT>
<P> 
<FONT Color="#0000FF">blue</FONT>         
<FONT Color="#000080">navy</FONT> 
<FONT Color="#00FFFF">aqua</FONT> 
<FONT Color="#008080">teal</FONT> 
<FONT Color="#00FF00">lime</FONT>       
<FONT Color="#008000">green</FONT> 
<FONT Color="#FFFF00">yellow</FONT> 
<FONT Color="#808000">olive</FONT> 
</B>

black white silver gray red maroon fuchsia purple

blue navy aqua teal lime green yellow olive

Look at the results. Chances are, one of the color names is "invisible". Oh, it's there, allright, but you can't see it because it's the same color as the background. I expect that to be the "silver" color (located between "white" and "gray"), because I set the background on this page to be "silver". But if you have your own default colors enabled (and HTML colors disabled), one of the other colors will seem to be missing.

It's important when using font colors to consider the consequences of your color selection. For example, since most browsers will enable "silver" (light grey) or "white" as the default background, then you may want to avoid using those two colors for fonts, in case the receiving browser doesn't respond to your 'BGCOLOR' attribute. In fact, for readability's sake, you probably want to avoid using light-colored fonts altogether, because they might not show up well on a light background. If you can live with the thought that some poor soul out there on the Internet might not be able to read your page because they have their HTML colors disabled, then you can follow this simple guideline: whatever background color you use, be sure to use a contrasting font color. I remember seeing one very elaborate web page with a yellow background, and white fonts. It was probably a really interesting page, but I didn't stick around to find out, because I just didn't want to squint that much. The point? Test your page. Then turn off HTML colors (in your browser settings), and test it again. Don't be satisfied until it's really readable.

Incidentally, you may pick a color that's very close or identical to the color with which your browser highlights hypertext links. This is not too big of a problem, however, because most browsers underline links in addition to highlighting them with color. Also, if somebody thinks it's a link and clicks on your text, it simply won't respond - no harm done.

Overseer: Monty Northrup ...

... leave e-mail ...