Text decoration

The text-decoration adds decorations to text in terms of underlining it or making blink and similar.

The text-decoration property contains following information:

value: none, [underline, overline, line-through or blink] or inherit;
initial: none;
applies to: all elements;
inherited: no;
percentages: N/A;
media: visual;
computed value: initial or specified value.

The values overline, line-through and blink make a line above the text, a line through the text and make text blink respectively. The value underline is typically avoided considering that it underlines text which is generally used for hyperlinks.

The color of the line must match the color of the text itself as defined within that same element.

Sometimes we want to style hyperlinks by ourselves and we don't want them to be underlined (which is a default state for <a> tag); in such a case it is enough to add text-decoration property to that particular hyperlink or hyperlinks with value 'none'.

Example

CSS text-decoration property example:

<html>
<head>
<title>CSS tutorial</title>
<style type="text/css">
body {
	font-family:"Verdana", sans-serif; color: teal; font-size:0.9em;
}
p {
	margin-top:30px;
}
.none {
	text-decoration:none;
}
.over {
	text-decoration:overline;
}
.through {
	text-decoration:line-through;
}
.blink {
	text-decoration:blink;
}
</style>
</head>

<body>

<p><a class="none">Visit BrenkoWeb.com (<i>none</i>)</a></p>
<p><a class="over">Visit BrenkoWeb.com (<i>overline</i>)</a></p>
<p><a class="through">Visit BrenkoWeb.com (<i>line-through</i>)</a></p>
<p><a class="blink">Visit BrenkoWeb.com (<i>blink</i>)</a></p>

</body>
</html>

›› go to examples ››

Example

CSS text-decoration property example:

Comments

About

Contact

Get Connected