CSS text-decoration Property
CSS text-decoration property sets line, style, and color, for the text decoration.
text-decoration is short hand for text-decoration-line, text-decoration-color, and text-decoration style.
The syntax to specify a value for text-decoration property is
text-decoration: text-decoration-line text-decoration-color text-decoration-style;
where
| Value | Description |
|---|---|
| text-decoration-line | Specifies type of line for text decoration. Refer CSS text-decoration-line tutorial. |
| text-decoration-color | Specifies color for text decoration. Refer CSS text-decoration-color tutorial. |
| text-decoration-style | Specifies line style of text decoration. Refer CSS text-decoration-style tutorial. |
text-decoration also takes initial or inherit values.
Examples
In the following examples, we decorate the text using text-decoration property.
Text Decoration with underline, red color, and double line
In the following example, we set text decoration with underline, red color, and double line, using text-decoration property.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#p1 {
font-size: 50px;
text-decoration: underline red double;
}
</style>
</head>
<body>
<p id="p1">Hello World.</p>
</body>
</html>
Text Decoration with line-through, and green color
In the following example, we set text decoration with line-through effect, and green color, using text-decoration property.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#p1 {
font-size: 50px;
text-decoration: line-through green;
}
</style>
</head>
<body>
<p id="p1">Hello World.</p>
</body>
</html>
Conclusion
In this CSS Tutorial, we learned about text-decoration property, and how to use this property for HTML Elements, with examples.