Learn CSS text-decoration-color Property in Simple Words with Examples
CSS text-decoration-color Property
This Blog You Will Learn ஃ CSS text-decoration-color Property
ஃ CSS text-decoration-color Property
ஃ Syntax
ஃ Structure Diagram
ஃ Syntax
ஃ Structure Diagram
ஃ Example
ஃ Output
ஃ Example
ஃ Output
How to Change Underline Color in CSS Using text-decoration-color
The CSS text-decoration-color property is used to specify the color of text decoration lines such as underline, overline, and line-through. By default, when a text decoration is applied, the line takes the same color as the text itself.
Syntax:
selector
{
text-decoration-color: color;
}
ஃ structure diagram examples
CSS text-decoration-color Property
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-decoration: underline;
text-decoration-color:red;
}
h3 {
text-decoration:underline;
text-decoration-color:blue;
}
</style>
</head>
<body>
<h1>Text Decoration Color Property</h1>
<h3>Underline with red color</h3>
<p> The text-decoration-color property
in CSS is used to set the color of text
decoration lines such as underline,
overline, and line-through. Normally,
when you apply a text decoration, the
line takes the same color as the text.</p>
</body>
</html>
How to Customize Text Decoration Color in CSS (Beginner Tutorial
Explain Program
<!DOCTYPE html>
<html>
<head>
<style>
<!Doctype html> → browser this is an HTML document
<html> → Root element of the webpage
<head> → Contains metadata and CSS style
<style> → Internal CSS is written
Step 2]
CSS Section
<style>
p {
text-decoration: underline;
text-decoration-color:red;
}
h3 {
text-decoration:underline;
text-decoration-color:blue;
}
</style>
P ➡ Selects all <p> tag paragraph elements.
text-decoration:underline; ➡ Add underline to paragraph text.
text-decoration-color: red; ➡ Changes underline color to red.
h3 ➡ Selects all <h3> headings.
text-decoration:underline; ➡ Add underline to paragraph text.
text-decoration-color: red; ➡ Changes underline color to blue.
Step 3]
closing the Tag </style> </head>
</style> </head>
Step 4]
<body> section (HTML Structure)
<body>
<h1>Text Decoration Color Property</h1>
<h3>Underline with red color</h3>
<p> The text-decoration-color property
in CSS is used to set the color of text
decoration lines such as underline,
overline, and line-through. Normally,
when you apply a text decoration, the
line takes the same color as the text.</p>
- <h1> ➡ heading.
- <h3> ➡ heading blue underline (apply css rule)
- <p> ➡ This paragraph red underline.
Step 5]
closing the Tag
</body> </html>
CSS text-decoration-color Property
Output :-
Post a Comment