The Text-Decoration Property

The Text-Decoration Property

The text-decoration property does not specify a font property, although it seems to fit best in this chapter because it affects type. The property is used to add underlining, overlining, strike-out, or a blinking effect to the text.




none | [underline | | overline | | line-through | | blink]



Applies to:

all elements


no (but see the following text)



The value is either none, meaning no decoration, or any combination of the following:

  • underline – An underline is added below the text.

  • overline – An overline is added above the text.

  • line-through – A horizontal line is inserted through the text (also known as strike-out).

  • blink – The text is made to blink.

In many browsers, underlining is used with the A element to mark the status of hyperlinks. The default style sheet for those browsers includes a rule like this:

A:link, A:visited, A:active { text-decoration: underline }

You cannot specify the exact position and thickness of the decorations. Many fonts come with indications of the preferred thicknesses of an overline, underline, and line-through and their distances from the base-line, and the browser tries to use those thickness and distance values. Otherwise, it computes appropriate values based on the size of the font. The color of the lines will be the same as the color of the text.

You have a similar lack of precise control over the blink decoration. The blinking text is shown in its own colors about half of the time; how it looks the other half is not specified. It may be invisible or it may be shown in a different color so that the two colors show alternately. Most browsers blink at a rate of approximately half a second on and half a second off. Not all browsers can blink, and, of course, blink has no effect when the document is printed.

The text-decoration property is not inherited. However, a decoration on a parent will continue in child elements. The effect of this continuation differs from the effect that would result if we were to give the child element its own decoration. For example, suppose you added this rule to your style sheet:

EM { text-decoration: underline }

In the following, the underline decoration affects all the EM element, even the child element, STRONG:

Some <EM>very, <STRONG>very</STRONG> important

things</EM> resulted from this effort.

The result would look like this:

Some very, very important things resulted from this effort.

The color of the decoration (if any) also continues across child elements. Thus, even if STRONG had a different color value, its underline would still have been black.

The reason text-decoration is not inherited has to do with possible future additions to this property. For example, suppose the decoration were a fancy border (see Figure). The EM rule in the style sheet would change from text-decoration: underline to, say, text-decoration: deco-border (note, this value is not yet available in CSS). The child element is included as part of the decoration of its parent. Figure(b) shows the effect if the child element were to inherit the fancy box value of its parent. The child would have a fancy border of its own in addition to that of its parent.

16. (a) The decoration continues across the embedded element; (b) the embedded element has its own decoration.

     Python   SQL   Java   php   Perl 
     game development   web development   internet   *nix   graphics   hardware 
     telecommunications   C++ 
     Flash   Active Directory   Windows