To hide an element using CSS, you can use three simple methods
- display
- visibility
- opacity properties
when we use the display : none option the program does not create any space for the data rather it does not display anything. But when you create a visibility : hidden attribute this makes space for that piece of code but the content is hidden and not visible to the user. by using the opacity : 0 option the space is allocated for the program code but it is made fully transparent. even when it is transparent u can access it and interact.
<html>
<head>
<title>
media visibility by css
</tite>
<style>
.hide-displaymethod{
display: none;
}
.hide-visiblemethod{
visibility: hidden;
}
.hide-opacitymethod{
opacity:0;
}
</style>
</head>
<body>
<h2>HIDE HTML ELEMENTS</h2>
<div class="hide-displaymethod">i love coding</div>
<div class="hide-visiblemethod">i love html</div>
<div class="hide-opacitymethod">i love css</div>
</body>
</html>
The above program is a simple program for implementing the above mentioned three properties
In this program first the html tags such as head tags and html tags are created the head tags consists of the title of the web page. Here we have created a web page with a name of “media visibility by css” . Then the body tag is opened where the <h2> tag is created and the phrase ” HIDE HTML ELEMENTS” is given. Then we have three main attributes . The first <div> element is hidden by using the display : none , so this phrase” i love coding” will never appear in the page. the second <div> element is hidden by using visibility : hidden , so it will be invinsible but still take up space. The third <div>element is hidden using opacity:0, so it will be invincible and take up some space and can still be interacted with.