HTML and CSS —

Text Decoration

You can "decorate" text with CSSthat is, apply or remove a particular decorative value. This is done using the text-decoration property, with values as follows:

  • none This is used primarily to remove the default underlines from links. See tutorial 10, "Link Effects, Lists, and Navigation."

  • underline This places a line underneath the selected text. Usability specialists tend to shun underlined text because it can be confused with linked text.

  • overline This places a line above the selected text.

  • line-through This places a line through the selected text.

  • blink Yep, you read that right. This causes text to blink, a feature that was introduced (and used to the point of pain) by Netscape in the early days. It works in all contemporary browsers but Internet Explorer.

Example 9-5 serves up an inline CSS sample for decorating text.

Example 9-5. Decorating text with CSS
<p style="text-decoration: underline;">This text is underlined</p>
<p style="text-decoration: overline;">This text has an overline</p>
<p style="text-decoration: line-through;">This text has a line-through</p>
<p style="text-decoration: blink;">This text blinks</p>

Figure 9-9 shows the results, with the exception of the blink.

Figure 9-9. Decorating text with CSStry out the sample CSS to see the blink.