DISPLAY PROPERTY IN CSS ( CSS Tutorial #19 )

Display property is another property in css that is really helpful and needed for many useful things to perform.
now display property can be used to make a element dissappear or visible.

display : none ; // this will make the element disappear from the webpage.
display: visible ; // this will make the element visible again.

by default display is visible.

LET US SEE STEP BY STEP HOW TO USE THIS PROPERTY :

Step 1: create a html layout as usual.

Step 2: write following code inside the style tag.

Screenshot from 2020-11-10 21-49-13.png

Step 3: run the file and see the result:

Screenshot from 2020-11-10 21-50-37.png

Step 4 : now add display as none.

Screenshot from 2020-11-10 21-51-16.png

Step 5 : run the file again.

Screenshot from 2020-11-10 21-51-04.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;
       display: none;
               }
                .boxliliput{
        color: palegreen;
        height: 250px;
        background-color: #232A34;
        visibility: hidden;
        
    } .brownbox{
        color: black;
        height: 50px;
        background-color:  #B49569;
        
    }
    .substyling{color: red;
    background-color: bisque;
        /*display: block;*/
    }

</style>
</head>
<body>
    <div class="bluebox">
        <p><br/>  <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>

So you see the difference after using the display property.
Before using the display property the Blurt , the description for @sct.blurt and its div was visible but then after using display property it got vanished.

Write your queries in the comment below.

Thats all for this tutorial.
Thank you

Link For Previous Tutorials

Sort Order:

Trending

[-]

blurtcurator · 4 years ago ·

Congratulations! This post has been upvoted by the @blurtcurator communal account,
You can request a vote every 12 hours from the #getupvote channel in the official Blurt Discord.Don't wait to join ,lots of good stuff happening there.

0.00 BLURT

$0.00