TEXT DECORATION IN CSS

Let us look at the text-decoration property in css today.
So what does text decoration property do...? well as the name says text decoration is used to decorate text on our webpage i.e to make it look more beautiful or to give it a seperate look from normal text.

Let us Implement the code and see the result but again you will only be able to see the difference if you were following along some previous tutorials.

Final Output :

Screenshot from 2020-11-15 22-39-41.png

Step 1 : create a structure for your html file.

Step 2 : write following code inside the style tag.

Screenshot from 2020-11-15 22-39-43.png

Step 3 : run the file with .html to see the output.

Screenshot from 2020-11-15 22-39-41.png

Full COde :

 <!DOCTYPLE HTML>
<html>
<head>
<meta charset="utf-8">
    <title>DIV AND SPAN</title>
<style>
    .bluebox{
        color: floralwhite;
        height: 50px;
        background-color: #3B5998;
        width: auto;
        text-align: center;
        text-decoration: underline;
        font-weight:bolder;
        font-size: 50px;
        letter-spacing: 1em;
        text-shadow: 5px 5px grey;
    } .boxliliput{
        color: palegreen;
        height: 250px;
        background-color: #232A34;
        font-style: italic;
        
        
    } .brownbox{
        color: black;
        height: 50px;
        background-color:  #B49569;
        letter-spacing: .5em;
        text-shadow: 1.5px 1.5px blue;
        text-indent: 40px;
        
    }
    .substyling{color: red;
    background-color: bisque;
        letter-spacing: .5em;
    }

</style>
</head>
<body>
   <div class="bluebox">
    <p><b> BLURT </b>                                        </p>
</div>
<div class="boxliliput">
 <p> <b>DESCRITION :</b>    </p> 
<p col> Hello @sct.blurt ,<span class="substyling"> Welcome.</span></p>
</div>
<div class="brownbox">
<p>Alread a Member than what are you doing here....!</p>
</div>



 </body>
 </html>

Explanation of some terms :

text-align : centre // aligns the text in the centre.
letter-spacing: .5em; // provide spacing between the lettes
text-shadow: 1.5px 1.5px blue; // give shadow to the text.
text-decoration: underline ; // underlines the text

We can see that we again have the same description page for @sct.blurt, but this time it is little different.

That's all for this tutorial.
Thank you

TEXT DECORATION IN CSS

Link For Previous Tutorials