Loading lesson path
Formula
text - decoration - style property sets the style of the decoration line.This property can have one of the following values: solid - Default value. Single line double - Double line dotted - Dotted line dashed - Dashed line wavy - Wavy line
Add different styles for 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 {Formula
text - decoration - line:underline;
text-decoration-color: red;
text-decoration-style: wavy;
}Formula
text - decoration - thickness property is used to set the thickness of the decoration line.Add different thickness for the decoration line:
h1 {
text-decoration-line: underline;
text-decoration-thickness: auto;
}
h2 {Formula
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;
}Formula
text - decoration property is a shorthand property for:
text - decoration - line(required)
Formula
text - decoration - color(optional)
Formula
text - decoration - style(optional)
Formula
text - decoration - thickness(optional)
Example 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:
Example a {
text-decoration: none;
}