How to Install Operating System ??Complete Guide Installing The Operating System

How To Adjust Visibility in CSS

How to Adjust Visibility in CSS

We will create an example page with several elements where one of the elements uses visibility properties and the other does not use visibility, but before the author shows values ​​that can be used by the visibility property in this CSS.

  • visible, this value is used to display elements
  • hidden is used to hide elements

Please prepare your coding requirements, and make an HTML page by following the HTML structure like the code below.

<style type = "text/css">
    .visibility1 {
        border: 1px solid #000;
        visibility: visible;
    }
    .visibility2 {
        border: 1px solid #000;
        visibility: visible;
    }
</style>

<div class = "visibility1"> This is an element of visibility 1 </div>
<div class = "visibility2"> This is an element of visibility 2 </div>

Display of the code above …

How To Adjust Visibility in CSS
How To Adjust Visibility in CSS

It can be seen that there are two elements using the same visibility value, that is visible, then the element will appear in the browser, let’s change one of the elements, namely the first element is replaced by visible and hidden values.

<style type = "text/css">
    .visibility1 {
        border: 1px solid #000;
        visibility: hidden;
    }
    .visibility2 {
        border: 1px solid #000;
        visibility: visible;
    }
</style>

Here is the appearance of visibility after being hidden …

How To Adjust Visibility in CSS
How To Adjust Visibility in CSS

It can be seen that the element space in the first visibility does not change, that is the function of visibility, which is to hide an element without removing the element extension or element space itself so that the element will still remain even if it has been hidden.

Before going forward, there are a number of articles that you might be looking for.

Read too :

Sending
User Review
0 (0 votes)

Add a Comment

Your email address will not be published. Required fields are marked *