Chapter 53. Highlighting Text with Color

In Topic 5, you saw how to set the default text color of a Web page along with the default background color and link colors. This topic looks at how to change the color of specific text elements or pieces of text within an element without affecting the default text color.

If you're one of those diehard Web designers who insist on using the font tag, you'll be happy to know that the color property of this tag does the job:

 <font face="Arial, Helvetica, sans-serif" color="#FF0000">   <h3>Note</h3>   <p>You <strong>must</strong> supply your current email address.</p> </font> 

Just as the typeface of the font tag applies to all the text elements nested inside it, the font color also applies. In the preceding example, both the h3 tag and the paragraph tag acquire the color red (#FF0000), no matter what the default text color of the page happens to be.

You can achieve the same effect with the color attribute of CSS:

   <h3 style="color: #FF0000;">Note</h3>   <p style="color: #FF0000;">You <strong>must</strong> supply your current email address.</p> 

TIP

Be very careful about changing text color whenever the mood strikes. One of the key identifiers of a hyperlink is that it appears in a different color as the rest of the text. When you change the color of nonhyperlink text, a certain percentage of your visitors will click it, thinking that it is a hyperlink. If you underline this text as well as change its color, you open the door to all kinds of angry emails claiming that your site doesn't work.

Only change text color as a last resort, after you have tried other, more typographical methods of conveying emphasis such as boldface or italic.

If you need to change the color of a string of text within an element, either nest font tags inside the element:

FAQ

What, exactly, am I coloring when I add a background color to a text element?

When you set the background-color attribute of a text element, you are actually coloring its block, or the rectangular area in which the text element sits. Normally, this block is transparent.

[View full width]
 <p>Roses are <font color="#FF0000">red</font>, and violets are <font color="#0000FF">blue< /font>.</p> 

or, for CSS, drop span tags around the text that you want to color:

[View full width]
 <p>Roses are <span style="color: #FF0000;">red</span>, and violets are <span style="color:  #0000FF;">blue</span>.</p> 

CSS also gives you the ability to color the background area of a text element, creating an effect like a highlighter pen, as you can see in Figure 53.1.

Listing 53.1. View Source for Figure

[View full width]

 <p>This paragraph is not highlighted....</p> <p style="background-color: #FFFF00;">This paragraph is highlighted....</p> <p>In this paragraph, this sentence is not highlighted. <span style="background-color:  #FFFF00;">This sentence is highlighted.</span> This sentence is not highlighted.</p> 

Figure 53.1. CSS is as good as any highlighter pen.

Changing the background color in this fashion usually makes more sense than changing the color of the type itself. You aren't as likely to trick your visitors into thinking that the text is a hyperlink. Why? Because you leverage the power of a metaphor.

TIP

Who says your highlighter has to be yellow? Try aqua (#00FFFF), hot pink (#FF0099), gray (#CCCCCC), or chartreuse (#99FF00).

To call even more attention to the highlighted text, add the following line to the style definition:

 font-weight: bold; 

With this modification, the text inside the highlighted region becomes bold.

Most people know what a printed page looks like when someone has gone over it with a highlighter pen. When you change the background color of a text element, the effect on screen looks very similar. Therefore, people tend to assume that your background color has the same functionto call attention to an important passage.

When the text itself changes color, people tend to associate it with a different metaphor: the hyperlink. This spells nothing but trouble, because it confuses your audience. They click and click on the colored text, and nothing happens, because it isn't a hyperlink. It just looks like one.

TOOL KIT

Yellow Highlighter Style Rule

The short style rule in this Toolkit gives you a virtual yellow highlighter to apply to any text on your page. It creates a class called highlight. To highlight an entire text element, set the class attribute of its tag to highlight:

 <p >Text goes here.</p> 

To highlight a string of text within an element, mark off the string with span tags, and set the span's class to highlight:

[View full width]
 <p>Text goes here. <span >Highlighted text goes  here.</span> Text goes here.</p> 

Place this rule between style tags in the head section of your page, or copy it as is and save it in an external CSS file.

 .highlight {   background-color: #FFFF00; }