CSS text-decoration-thickness: Complete Guide with Examples (Beginner to Advanced)
CSS Text Decoration Thickness Property Tutorial
This Blog You Will Learn ஃ What is CSS Text Decoration Thickness
ஃ What is CSS Text Decoration Thickness
ஃ Where it is us
ஃ Syntax: ஃ structure diagram examples
ஃ Examples
ஃ Output
ஃ Examples
ஃ Output
What is CSS Text Decoration Thickness
What is CSS Text Decoration Thickness
The CSS text-decoration-thickness property is used to control the
thickness (width) of text decoration lines such as underline, overline, and line-through.
It allows web developers to customize how thick or thin the decoration line
appears around text. By default, browsers apply a standard thickness, but this
property gives full control over the visual appearance of decorated text. The
value can be set to auto, a fixed length like px, or a percentage based on the
font size. It is mainly used in modern web design to improve readability and
create stylish text effects.
Syntax:
selector
{
text-decoration-thickness: value;
}
Where it is us
- Highlight headings
- Underline links
- Improve UI design
- Accessibility( better visibility)
structure diagram examples
CSS Text Decoration Thickness Property Tutorial
Examples
Examples
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-decoration: underline blue;
text-decoration-thickness: auto;
}
h2 {
text-decoration: underline red;
text-decoration-thickness: 5px;
}
h3 {
text-decoration: overline green;
text-decoration-thickness: 50%;
}
/* Use shorthand property */
h4 {
text-decoration: line-through solid blue 50%;
}
</style>
</head>
<body>
<h1>CSS Text Decoration Thickness Property Tutorial</h1>
<h2>https://webdesigningtheory.blogspot.com/</h2>
<h3>CSS Tutorial</h3>
<h4>CSS Text Decoration Thickness Property </h4>
</body>
</html>
CSS Text Decoration Thickness Property Tutorial
Explain Program
Step 1]
<!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>
h1 {
text-decoration: underline blue;
text-decoration-thickness: auto;
}
h2 {
text-decoration: underline red;
text-decoration-thickness: 5px;
}
h3 {
text-decoration: overline green;
text-decoration-thickness: 50%;
}
h4 {
text-decoration: line-through solid blue 50%;
}
</style>
css code
text-decoration: Property
Add - underline - blue
Add - overline - green
Add - line-through - blue
Step 3]
Closing tag
<</style>
</head>
Step 4]
<body> section
<body> section
<body>
<h1>CSS Text Decoration Thickness Property Tutorial</h1>
<h2>https://webdesigningtheory.blogspot.com/</h2>
<h3>CSS Tutorial</h3>
<h4>CSS Text Decoration Thickness Property </h4>
<h1> - heading - Blue - Underline
<h2> - subheading - Red - underline
<h3> - small heading - Green - underline
<h4> - smaller - Blue - underline
Step 5]
closing the Tag
</body> </html>
CSS Text Decoration Thickness Property Tutorial
Output:
Post a Comment