Showing posts with label text-decoration css. Show all posts
Showing posts with label text-decoration css. Show all posts

Thursday, February 8, 2024

css text-decoration

   CSS Text-decoration 

 1]  cascading style sheets (css) the text-decoration property is used to specify  

    the decoration added to text content.

2] It allows you to control aspects such as underlining , overline, line-through, none

     1]  Text decoration Property

         1] text-decoration: overline;

        2]  text-decoration : underline;

        3]  text -decoration : line-through;  

        4] text-decoration :none;

1] Text-decoration : overline  

    1]  Adds a line above the text;

Syntax :- 

     Text-decoration : overline;

    Example :-

<html>
<head>
    <title>TEXT DECORATION  PROPERTY</title>
    <STYLE>
         
         H2
         {
           text-decoration:overline;
         }

    </STYLE>
</head>
<body>
    <H2 >CREATE A BLOGGER WEBSITE :- </H2>
    <h2>webdesigningtheory.blogspot.com/</h2>
    <H3>LEARN TO PROGRAMING LANGUAGE </H3>
</body>
</html>

Text-decoration : overline  

Output:-

Text-decoration : overline   output


2] Text-decoration : underline

     1] Adds a line beneath the text.

     Syntax :-

               Text-decoration : underline;

    Example :-

<!DOCTYPE html>
<html>
<head>
    <title>TEXT DECORATION  PROPERTY</title>
    <STYLE>
         
         H2
         {
           text-decoration: underline ;
         }

    </STYLE>
</head>
<body>
    <H2 >CREATE A BLOGGER WEBSITE :- </H2>
    <h2>webdesigningtheory.blogspot.com/</h2>
    <H3>LEARN TO PROGRAMING LANGUAGE </H3>
</body>
</html>

Text-decoration : underline 

Output :- 

Text-decoration : underline output





3] text -decoration : line-through 

    
 1] Draws a line through the middle of the text.
 

Syntax :-      

       text -decoration : line-through; 

    Example:- 

<!DOCTYPE html>
<html>
<head>
    <title>TEXT DECORATION  PROPERTY</title>
    <STYLE>
         
         H2
         {
           text-decoration: line-through ;
         }

    </STYLE>
</head>
<body>
    <H2 >CREATE A BLOGGER WEBSITE :- </H2>
    <h2>webdesigningtheory.blogspot.com/</h2>
    <H3>LEARN TO PROGRAMING LANGUAGE </H3>
</body>
</html>

 Text -decoration : line-through

Output

Text -decoration : line-through output





4] text-decoration :none

 
    1] No text decoration is applied.

 Syntax :-

       text-decoration :none

Example :-

<!DOCTYPE html>
<html>
<head>
    <title>TEXT DECORATION  PROPERTY</title>
    <STYLE>
         
         H2
         {
           text-decoration: none ;
         }

    </STYLE>
</head>
<body>
    <H2 >CREATE A BLOGGER WEBSITE :- </H2>
    <h2>webdesigningtheory.blogspot.com/</h2>
    <H3>LEARN TO PROGRAMING LANGUAGE </H3>
</body>
</html>

 text-decoration :none;

Output:-

text-decoration :none output





READ MORE 

radio button html

html form

html list

html unordered list

meta attribute html

script element script element html

html list html

add background image html