Header Ads

Home > CSS Tutorial > CSS text-decoration-style Property Explained (Solid, Dotted, Dashed ) – Easy Beginner Guide 2026

CSS text-decoration-style Property Explained (Solid, Dotted, Dashed ) – Easy Beginner Guide 2026

February 17, 2026

 CSS Text Decoration Style Explained

CSS Text Decoration Style Explained

CSS Text Decoration Style  Explained


text-decoration-style property in css defines the pattern or design of text-decoration  line

Why is Important
  •  Creative link styles
  • Highlighted text
  • Error indicators
  • Better UI effects

How It Works Internally 

  • It displays the text
  • Calculates the baseline
  • Draws the decoration line(underline/overline)
  • Applies the selected style pattern
  • Applies color and thickness

Real World Use 

  •  Custom link styling
  • Highlight important words
  • Education websites
  • Error message indication
  • ModernUI design
Advantages
  • Improves  design
  • Adds creativity
  • Better user experience
  • Easy to implement
  • Works in modern browsers

ஃ structure diagram examples

CSS Text Decoration Style Diagram

Syntax :


  text-decoration-style: value;
}

CSS Text Decoration Style Explained
Examples

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}

h4 {
  text-decoration: underline overline;
}
</style>
</head>
<body>

<h1> CSS Text Decoration Style Explained</h1>
<h2>CSS Text Decoration Style Explained</h2>
<h3>CSS Text Decoration Style Explained</h3>

</body>
</html>

CSS Text Decoration Style Explained

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] 


🔰<style> tag Internal CSS Section

h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}

h4 {
  text-decoration: underline overline;
}
</style>

 <h1> selector

  • text-decoration:overline;
  •   adds line above text.

css text decoration style explained

 


  <h2> selector

  • line-through add line through the middle of text.
h2 {
  text-decoration: line-through;
}

output 
CSS Text Decoration Style Explained

 h3 selector

  • adds line below text.
  • very commonly use for links.
css code
h3 {
  text-decoration: underline;
}

Output

CSS Text Decoration Style Explained

h4 selector

  • Combines two values
  • adds both underline and overline to the text.
h4 {
  text-decoration: underline overline;
}
Output 




Step 5]

   Closing tag


<</style>
</head>

Step 6]

<body> section


<body>

<h1> CSS Text Decoration Style Explained</h1>
<h2>CSS Text Decoration Style Explained</h2>
<h3>CSS Text Decoration Style Explained</h3>
<h4>https://webdesigningtheory.blogspot.com</h4>

  1. h1  → overline
  2. h2  → line-through
  3. h3 →  underline 
  4. h4  →  underline + overline

Step 7]

closing the Tag

  </body>   </html>

CSS Text Decoration Style Explained
Output

CSS Text Decoration Style Explained

Related Post :-

Post a Comment

No comments

Subscribe to: Post Comments ( Atom )
Powered by Blogger.