CSS Text Decoration Style Explained

-

 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

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.


 


  <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 



🔰

 CSS Text Decoration Style Concept Structure Showing 


CSS Text Decoration Style Diagram

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 :-

CSS Outline color property in 2026

What is CSS Text color in 2026

CSS padding property Explained

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

Html anchor tag

-
Image
   How to Add HTML  Anchor Tag    Anchor Tag  The <a> tag define hyperlink   1]  Html anchor tag define hyperlink this use to link from one           page to another.  2]  Its create hyperlink to other web page as well as files, location   3]  Most important attribute of<a> element is the href attribute.  4]  when link is clicked it redirects the user to that page.  5]  The <a> tag creates a clickable link.  6] The href attribute sets the target page or site  example:-  webdesigningtheory.blogspot.com/ 7] The target attribute specifies in what tab ,window to open the new       page.  8]  Its href  <a>  attribute  creates a hyperlink to web page, files                 email addresses ,locations in the same page else URL address.  9] ...
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

How to insert image in html

-
Image
  How to insert image in html Q] What Is The  Image  Tag  In  HTML?  The  <img src="">  HTML  tag is used to display an image on a web page .  It is a self -closing tag.  which means it does not need a separate closing tag  The <img> tag use embed  image in HTML page.  Image are not technically  insert in web page.  image are linked to the web pages. The <img> tag is empty it contains attributes only and does not have a closing tag. Syntax :-  <img src="image_path" alt="alternative -text" > Q] What Are Image  Tag.? Image tagging is process of identifying and labeling the contents of an image tag  This can be done manually by someone looking at the image and typing in description/  automatically using machine Html IMG Attribute :-  1] src :-   src is use to specify the path to image.  It is a necessary  attribute that describes source or pat...
Read more

html iframe

-
Image
HTML <iframe> Information           1] The HTML  <iframe>   tag specifies an inline frame          2] The   src   attribute defines the URL of the page to embed          3] Always include a   title   attribute (for screen readers)          4] The html <iframe>  height   and   width   attributes specify the size of the iframe          5] html <iframe> Use  border:none;  to remove the border around the ifram Program <!doctype html> <html> <body> <h2>HTML Iframes</h2> <p>You can use the height and width attributes to specify the size of the iframe:</p> <iframe   src=" https://webdesigningtheory.blogspot.com/2023/05/html-and-css-use-to-create-easy- webpage.html " height="300" width="500" title="iframe"> </iframe> </body> ...
Read more