html5 Site Icon CSS3 Site Icon CSS Site Icon

CSS 1/2 Reference

CSS text-decoration property

Definition

The CSS text-decoration property allows us to decorate text.

Applies To

All elements.

Property Values

blink - Defines blinking text.

inherit - The text will inherit the decoration of its parent selector.

line-through - The text will have a line drawn through the centre of it.

none - Defines normal text with no decoration (default).

overline - The text will have a line drawn over it.

underline - The text will have a line drawn under it.

Default Value

Default value is set to none which produces no text decoration.

Inheritance

The text-decoration property is NOT inherited from the parent element.

Browser Anomalies

IE5, IE6 and IE7 do not support the inherit property value.
IE8 does with a valid !DOCTYPE.
IE9+ supports the inherit property value.

Chrome, Internet Explorer and Safari do not recognize the blink property value.

Example



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML/CSS for the CSS text-decoration property follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS 1/2 Reference - CSS text-decoration Property</title>

<!-- Valid values for CSS text-decoration Property are:
	
	none, blink, inherit, line-through, overline and underline.
	
--> 

<style type="text/css">

/* Underline h1 headings */
h1 {
  text-decoration: underline;
}

/* Overline h2 headings */
h2 {
  text-decoration: overline;
}

/* Align h3 headings to the right */
h3 {
  text-decoration: line-through;
}

/* All paragraphs will blink */
p {
  text-decoration: blink;
}

/* All link text will be undecorated */
a {
  text-decoration: none;
}
</style>

</head>
<body>
<h1 id="linktoh1">All h1 Headings Will Be Underlined</h1>
<p>Using blink can be extremely distracting and annoying for users.</p>
<h2>All h2 Headings Will Be Overlined</h2>
<p>Using blink can be extremely distracting and annoying for users.</p>
<h3>All h3 Text Will have a Line Through The Middle</h3>
<p>Using blink can be extremely distracting and annoying for users.</p>
<a href="#linktoh1">Is it a bird? Is it a plane? No! It is an undecorated Link</a>
</body>
</html>

How It Looks

The results of using the text-decoration property with the values above will look something like the following:

notepad
CSS text-align    << Prev          Next >>   CSS text-indent

go to home page Homepage go to top of page Top


CSS properties

The complete set of visual CSS properties from the latest 2.1 Specification.

Click the links for more information on individual properties and their values.