• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Text Controls > Decorating Text

Decorating Text

Text decoration allows you to adorn the text in one of four ways. Used to add emphasis, these decorations attract the reader's eye to important areas or passages in your Web page (Figure 4.8).

Figure 4.8. There are a variety of ways to decorate your text, but the most useful is underlining. Striking through text is also useful for text that you want to show as being deleted.

To decorate a selector's text:


Type the property name, followed by a colon (:), in the CSS definition list (Code 4.8).

Code 4.8. Emphasized text will be underlined unless it is in a paragraph, in which case it will have a line through it and a line over it, which it inherits from the <p> tag.

Table 4.9. text-decoration Values
Value Compatibility
none IE4, N4, CSS1
underline IE3, N4, CSS1
overline IE4, N6, CSS1
line-through IE3, N4, CSS1
blink IE4, N4, CSS1


Type a value for the decoration style (Table 4.9). Choose one of the following:

  • underline, which places a line below the text

  • overline, which places a line above the text

  • line-through, which places a line through the middle of the text

  • blink, which causes the text to blink on and off

  • none, which overrides decorations set elsewhere


If you want to, and as long as the first value is not none, you can have multiple text decorations by adding more values in a list separated by spaces, as follows:

underline overline underline blink


Many visitors don't like blinking text, especially on Web pages where they spend a lot of time. Use this decoration sparingly.


I've used strikethrough in online catalogs that include sale prices. I show the original price in strikethrough, with the sale price next to it.


Setting text-decoration: none; overrides link underlines in many browsers, even if the visitor has set her browser to underline links. In my experience, many visitors look for underlining to identify links. Although I don't like underlining for links—it clutters the page, and CSS offers many alternatives to identify links—I receive angry e-mails from visitors when I turn underlining off.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint