Refine text appearance with CSS Text Decoration! Explore examples for enhancing style and readability, mastering the art of expressive typography in web projects.
In this chapter you will learn about the following properties:
text-decoration-line
text-decoration-color
text-decoration-style
text-decoration-thickness
text-decoration
The text-decoration-line
property is used to add a decoration line to text.
Tip: You can combine more than one value, like overline and underline to display lines both over and under a text.
h1 {
text-decoration-line: overline;
}
h2 {
text-decoration-line: line-through;
}
h3 {
text-decoration-line: underline;
}
p {
text-decoration-line: overline underline;
}
Note: It is not recommended to underline text that is not a link, as this often confuses the reader.
The text-decoration-color
property is used to set the color of the decoration line.
h1 {
text-decoration-line: overline;
text-decoration-color: red;
}
h2 {
text-decoration-line: line-through;
text-decoration-color: blue;
}
h3 {
text-decoration-line: underline;
text-decoration-color: green;
}
p {
text-decoration-line: overline underline;
text-decoration-color: purple;
}
The text-decoration-style
property is used to set the style of the decoration line.
h1 {
text-decoration-line: underline;
text-decoration-style: solid;
}
h2 {
text-decoration-line: underline;
text-decoration-style: double;
}
h3 {
text-decoration-line: underline;
text-decoration-style: dotted;
}
p.ex1 {
text-decoration-line: underline;
text-decoration-style: dashed;
}
p.ex2 {
text-decoration-line: underline;
text-decoration-style: wavy;
}
p.ex3 {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: wavy;
}
The text-decoration-thickness
property is used to set the thickness of the decoration line.
h1 {
text-decoration-line: underline;
text-decoration-thickness: auto;
}
h2 {
text-decoration-line: underline;
text-decoration-thickness: 5px;
}
h3 {
text-decoration-line: underline;
text-decoration-thickness: 25%;
}
p {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: double;
text-decoration-thickness: 5px;
}
The text-decoration
property is a shorthand property for:
text-decoration-line
(required)text-decoration-color
(optional)text-decoration-style
(optional)text-decoration-thickness
(optional)h1 {
text-decoration: underline;
}
h2 {
text-decoration: underline red;
}
h3 {
text-decoration: underline red double;
}
p {
text-decoration: underline red double 5px;
}
All links in HTML are underlined by default. Sometimes you see that links are styled with no underline. The text-decoration: none;
is used to remove the underline from links, like this:
a {
text-decoration: none;
}
Property | Description |
---|---|
text-decoration | Sets all the text-decoration properties in one declaration |
text-decoration-color | Specifies the color of the text-decoration |
text-decoration-line | Specifies the kind of text decoration to be used (underline, overline, etc.) |
text-decoration-style | Specifies the style of the text decoration (solid, dotted, etc.) |
text-decoration-thickness | Specifies the thickness of the text decoration line |
#css