CSS text-decoration Tutorial
View more Tutorials:
CSS text-decoration is used to decorate the text content of an element. The formal syntax of CSS text-decoration requires you to provide 3 values for it.
Formal Syntax
/* Formal Syntax: */ text-decoration: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> /* Example: */ text-decoration: underline dotted red; text-decoration: underline solid blue; text-decoration: line-through solid green;
Note: The order of (text-decoration-line, text-decoration-style, text-decoration-color) may change arbitrarily.
Formal Syntax
/* Formal Syntax: */ text-decoration: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> text-decoration: <'text-decoration-line'> || <'text-decoration-color'> || <'text-decoration-style'> text-decoration: <'text-decoration-style'> || <'text-decoration-color'> || <'text-decoration-line'> ...
<h2 style="text-decoration: underline dotted red;">
text-decoration: underline dotted red;
</h2>
<h2 style="text-decoration: underline solid blue;">
text-decoration: underline solid blue;
</h2>
<h2 style="text-decoration: line-through solid green;">
text-decoration: line-through solid green;
</h2>
| CSS property | Values |
| text-decoration-line |
|
| text-decoration-style |
|
| text-decoration-color |
|
You can also provide 1 or 2 values for CSS text-decoration:
<!-- text-decoration-line -->
<h2 style="text-decoration: overline;">
text-decoration: overline;
</h2>
<!-- text-decoration-line || text-decoration-color -->
<h2 style="text-decoration: underline blue;">
text-decoration: underline blue;
</h2>
<!-- text-decoration-line || text-decoration-style -->
<h2 style="text-decoration: line-through dashed;">
text-decoration: line-through dashed;
</h2>
<!-- text-decoration-line || text-decoration-style || text-decoration-color -->
<h2 style="text-decoration: overline wavy green;">
text-decoration: overline wavy green;
</h2>
Instead of using CSS text-decoration, You can use the combination of 3 following properties:
- CSS text-decoration-line
- CSS text-decoration-style
- CSS text-decoration-color
text-decoration-example2.html
<!DOCTYPE html>
<html>
<head>
<title>CSS text-decoration</title>
<meta charset="UTF-8"/>
<style>
div {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
}
</style>
</head>
<body>
<p style="font-style:italic;">
{<br/>
text-decoration-line: underline; <br/>
text-decoration-style: wavy; <br/>
text-decoration-color: red; <br/>
}
</p>
<div>
Some thing Error!
</div>
</body>
</html>
CSS text-decoration-line is used to set up the position of decorative lines for the text content of an element. It can receive one of the following values:
- none (Default)
- underline
- overline
- line-through
<p style="text-decoration-line: none;"> text-decoration-line: none; </p> <p style="text-decoration-line: line-through"> text-decoration-line: line-through </p> <p style="text-decoration-line: underline"> text-decoration-line: underline </p> <p style="text-decoration-line: overline"> text-decoration-line: overline </p>
CSS text-decoration-line accepts one or more values:
<p style="text-decoration-line: line-through underline"> text-decoration-line: line-through underline </p> <p style="text-decoration-line: underline overline"> text-decoration-line: underline overline </p> <p style="text-decoration-line: overline line-through underline"> text-decoration-line: overline line-through underline </p>
CSS text-decoration-style is used to set up the style for the lines created by CSS text-decoration-line.
The possible values of CSS text-decoration-style:
- solid
- double
- dotted
- dashed
- wavy
<p style="text-decoration-line:underline; text-decoration-style: solid;"> text-decoration-style: solid; </p> <p style="text-decoration-line:underline; text-decoration-style: double;"> text-decoration-style: double; </p> <p style="text-decoration-line:underline; text-decoration-style: dotted;"> text-decoration-style: dotted; </p> <p style="text-decoration-line:underline; text-decoration-style: dashed;"> text-decoration-style: dashed; </p> <p style="text-decoration-line:underline; text-decoration-style: wavy;"> text-decoration-style: wavy; </p>
Note: Although you can assign one or more values to CSS text-decoration-line, you can only assign one value to CSS text-decoration-style. This means that all lines that are being decorated for the content of a particular element will have the same style.
text-decoration-style-example2.html
<!DOCTYPE html>
<html>
<head>
<title>CSS text-decoration-style</title>
<meta charset="UTF-8"/>
<style>
p {
font-size: 120%;
text-decoration-line:underline overline;
text-decoration-style: wavy;
}
</style>
</head>
<body>
<h2>CSS text-decoration-style</h2>
<p>
text-decoration-line:underline overline;
text-decoration-style: wavy;
</p>
</body>
</html>
CSS text-decoration-color is used to set up the color for the lines created by CSS text-decoration-line.
The value of CSS text-decoration-color may be:
- Color name, for example: red, blue, yellow, ...
- A GRB value, for example: GRB(255,255,0),..
- A HEX value, for example: #FF00FF.
- currentColor: The line color will be the same as the text color of the element
- transparent: Set up the transparent color for the line.
/* <color> values */ text-decoration-color: currentColor; text-decoration-color: red; text-decoration-color: #00ff00; text-decoration-color: rgba(255, 128, 128, 0.5); text-decoration-color: transparent; /* Global values */ text-decoration-color: inherit; text-decoration-color: initial; text-decoration-color: unset;
Example:
<p style="text-decoration-line:underline; text-decoration-color: red;"> text-decoration-color: red; </p> <p style="text-decoration-line:underline; text-decoration-color: blue;"> text-decoration-color: blue; </p> <p style="text-decoration-line:underline; text-decoration-color: currentColor;"> text-decoration-color: currentColor; </p>
Note: Although you can assign one or more values to CSS text-decoration-line, you can assign only one value to CSS text-decoration-color. This means that all lines that are being decorated for a particular element will have the same color.
<!DOCTYPE html>
<html>
<head>
<title>CSS text-decoration-color</title>
<meta charset="UTF-8"/>
<style>
p {
font-size: 120%;
text-decoration-line:underline overline;
text-decoration-color: blue;
}
</style>
</head>
<body>
<h2>CSS text-decoration-color</h2>
<p>
text-decoration-line:underline overline;
text-decoration-color: blue;
</p>
</body>
</html>
