How to Specify Text Color
Text color can be used to help make text stand out. This task shows you how to change the color of your words. It also discusses changing the color of a single word within an already-colored sentence. The possibilities are endless, and that's why you have to be careful. Too much colored text is more akin to a nightmare than it is to pleasant reading. Exercise caution when it comes to changing the colors in your Web site, and that includes the text.
Figure 2.1 Judicious use of colored text on your page will enhance your message; too many colors can distract and confuse the reader.
){kind=link}
Help! Aliens Colored My Page!
I've seen Web sites where there is definitely something other-worldly going on. It's the only way to explain the horrendous designs evident on the Web today. Many people seem to subscribe to the "I can, therefore I must" school of HTML authoring. They believe that the more techniques they use, the more people will love their Web sites.
Wrong! You can quickly over-do your use of color. Two or three colors of text have more impact than a dozen. Many more, and the colors cease to mean anything. I'll teach you how to change the color of your text. But I urge you to use the technique sparingly and tactfully. It's up to you to resist the "I can, therefore I must" syndrome.
Add the <font> Tag Pair
Add the color Attribute
Nest Colors
Test the Page
Another use of the <font> tag is to change the color of your text. Type <font>...</font>.
<html> <head> <title>Working with the Font Tag</title> </head> <body> <font> Here is text within the font tag pair. </font> </body> </html>
Add the color attribute. Type <font color="value">...</font> where value is specified using either of the methods discussed in Part 1, Task 10, "How to Specify Colors."
<html> <head> <title>Working with the Font Tag</title> </head> <body> <font color="#3300ff"> Here is text within the font tag pair. The color attribute has been added, and a hex value specified to make the text blue with a touch of red. </font> </body> </html>
There might be times when you want to have a few words of one color appear within a paragraph of text in another color. To do this, simply nest one <font> tag within another. Type <font color="#ff0000">...<font color="#00ff00">...</font>...</font>.
<html> <head> <title>Working with the Font Tag</title> </head> <body> <font color="#3300ff"> Here I am embedding a couple words of <font color="red">red text</font> within a line of blue font. Notice that to do this I simply nest one font tag pair within the other.</font> </body> </html>
You've made a number of changes to your text over the past couple of steps. Hopefully, you've been saving your page and checking your results in a browser all along. If not, do so now. Try setting your browser to override these settings to get an idea of how your page could be changed by the viewer. (see figure 2.2)
){kind=link}