CSS Text Decoration Thickness Property Tutorial

-

 CSS Text Decoration Thickness Property Tutorial



CSS Text Decoration Thickness Property Tutorial

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;
 }

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

text-decoration: Property
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 pre tag

-
Image
                                    HTML pre Tag Information   1. The <pre> tag defines preformatted text.  2. Text in a <pre> element is displayed in a fixed-width font. 3.  text preserves both spaces and line breaks.  4. syntax with :- <pre>.......</pre> tag 5. displayed in a fixed-width font. 6 .The text will be displayed exactly as written in the HTML source code. Program     HTML <pre> tag <html> <head> <title>html pre tag </title> </head> <body> <pre> My name is ram my college name is satara   I like Apple My favourity color is skyblue </pre> </body> </html> OUTPUT          Related Post :-   html aside tag inline css in html html login in form
Read more

Inline css in html

-
Image
                       Inline CSS   Information: 1]    Inline CSS is used to apply a  unique style to a single HTML element . 2]   In inline CSS uses the    Style attribute of an HTML element. 3]   Css Apply in a Single element by inline css Technique.  4]  Inline css also use method to insert style sheets in HTML document Inline Css        Program <html> <head> <title>inline property</title> </head> <body> <h1 style="color:red; background-color:pink;">html</h1> <p style="color:purple;">hyper text markup language</p> <h3>Information</h3>s <dl>INLINE CSS APPLY</dl> <dd>inline csss use</dd> <P>Css Apply in a Single element by inline css Technique.<br>  inline css also use method to insert style sheets in HTML document.  </P> ...
Read more

how to add background image in html.

-
Image
how to insert background image in html Program    Background Image  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Document </ title > </ head > < style >     p { background-image : url ( 'https://cdn.wallpapersafari.com/27/83/hGWHei .jpg' ); <!-- image path --> height : 600px ; <!--height of image-->         width : 50% ;     }     p {         color : red ;         text-align : center ;     } </ style > < body >     < h1 > Background Image </ h1 >     < BR<BR >< BR > < p > < BR<BR >< BR >< BR >< BR > how to insert background image ...
Read more

css id selector

-
Image
        CSS ID Selector 1] css id selector  attribute  is the unique identifier in an html document. 2] id selector use # character. 3] css id selector is used to apply style specific HTML element. Syntax :- #id  { // css property } CSS id selector  Example:- <! DOCTYPE html > < html > < head >     < title > css id selector </ title >     < style >         #web         {             text-align : center ;             color : brown ;         }     </ style > </ head > < body >     < h2 id = "web" >         hello https://webdesigningtheory.blogspot.com/ </ h2 >         < h3 > This is program of Css ID Selector </ h3 >     </ h2 >     </ body ...
Read more

CSS text-emphasis-color Property

-
Image
 Learn CSS text-emphasis-color Property  Learn CSS text-emphasis-color Property The text-emphasis-color property in Cascading Style Sheets (CSS) is used to set the color of emphasis marks applied to text. Syntax: selector  {   text-emphasis-color : color ;  }   Learn CSS text-emphasis-color Property Example <! DOCTYPE html > < html > < head > < style > h1 {     text-emphasis-style : circle ;   text-emphasis-color : blue ; } p {   text-emphasis-style : triangle ;   text-emphasis-color : red ; } h2 {   text-emphasis-style : double-circle ;   text-emphasis-color : orange ; } h3 {     text-emphasis-style : sesame ;   text-emphasis-color : red ; } </ style > </ head > < body > < h1 > CSS text-emphasis-color Property </ h1 > < p > https://webdesigningtheory.blogspot.com/ </ p > < h2 > Web Designing Theory </ h2 > < h3 > ...
Read more