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>
If you need to change the color of a string of text within an element, either nest font tags inside the element:
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.
[View full size image]
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.
TIPWho 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:
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 KITYellow 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:
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] 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.
|