CSS text-decoration-thickness: Complete Guide with Examples

 CSS Text Decoration Thickness Property Tutorial

CSS Text Decoration Thickness Property Tutorial

This Blog You Will Learn

 ஃ What is CSS Text Decoration Thickness 

 ஃ  Where it is us 

 ஃ  Syntax:
 
ஃ structure diagram examples

 ஃ Examples

ஃ  Output

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

CSS Text Decoration Thickness Property Tutorial
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

Add  -  underline      -  blue  
Add  -  overline        - green
Add   -  line-through  - blue

Step 3]

   Closing tag


<</style>
</head>

Step 4]
<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:

CSS Text Decoration Thickness Property Tutorial


Read More :

CSS outline width property

CSS Text Shadow property

CSS Conic Gradient Property

Comments

Post a Comment

Popular posts from this blog

HTML Tag

Image
 HTML Tag  Html basic tag:-   <!DOCTYPE html> Html  first line of the code <!DOCTYPE html> is called a doctype declaration the browser which version of HTML the page is written . Html tag using the doctype the HTML5 , the most up-to-date version of  HTML language.The DOCTYPE declaration of the instruction to web browser of HTML the page is written in.  <HTML>:- <Html>.   </html> <html> tag tells the browser  this is HTML document . The <html> tag represent the root of  HTML document. The <html> tag is the container for other HTML elements  <!DOCTYPE> . The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.HTML is a computer language that makes up most web pages and online applications. A hypertext text used to reference other pieces of text, while a markup language is a series of markings that tells w...
Read more

HTML Input Type Submit Syntax and Example

Image
What is Input Type Submit in HTML The input type="submit" in HTML is used to create a submit button in a form. When a user clicks this button, it sends (submits) the form data to a server for processing. In simple words, a submit button helps users send the information they entered in a form, like login details, contact forms, or registration data. Syntax : <input type= "submit" value="submit"> type ="submit"  ➡ create a submit button  value ="send"    ➡ text shown on the button A button that submit the form.<input type ="submit"> defines  button for submitting form data  form-handler. The form-handler is typically server page with the  script for processing input data. the form -handler is specified in the forms action attribute.  ⭐ HTML Input Type Submit Syntax and Example  program <! DOCTYPE html > < html > < body > < h2 > Submit Button </ h2 > < p > The < strong >...
Read more

CSS Text Color Explained with Syntax and HTML Examples

Image
 What Is CSS Text Color This Blog You Will Learn  ஃ   What Is CSS Text Color  ஃ   Syntax   ஃ   Purpose of Text Color  ஃ    Real world Use Cases  ஃ    What Is CSS Text Color  Example    ஃ   Output What Is CSS Text Color CSS text color refers to the color applied to text content on a web page using the color property in CSS. It controls how text appears visually and plays a major role in readability, accessibility, branding, and user experience . Syntax  selector{   color:value; } Purpose of Text Color ✅ Make content readable.  ✅ Highlight important information. ✅ Match brand identity. ✅ Create visual hierarchy. ✅ Improve user experience. Real world Use Cases Highlighting error messages. Emphasizing headings. Branding and theme design improving content readability. ஃ  structure diagram examples What Is CSS Text Color Example   <! DOCTYPE html > ...
Read more