How to set visibility property of an element in CSS ?
Last Updated :
09 Sep, 2021
Visible property is used to specify whether an element is visible or not in a web document, but the hidden elements take up space in the web document. You can set the visibility property of an element in CSS using the same Visible property.
Through visibility property, we can make elements like images, text, boxes, etc visible to our naked eye, or you can even hide. To hide table elements you can use collapse, which you will encounter further in this article.
Syntax:
visibility: visible | hidden | collapse | initial | inherit;
Property value:
- visible: It is the default value. The element is a show or visible normally in the web document.
- hidden: This property hides the element from the page but takes up space in the document.
- collapse: This property only used for the table elements to remove the rows and columns from the table.
Example 1: Using Visible and hidden property value.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.line1 {
color: green;
/* visible value to make element visible */
visibility: visible;
}
.line2 {
color: green;
/* hidden value to hide elements from user. */
visibility: hidden;
}
</style>
</head>
<body>
<h1>
Given line is <small class="line1">
Welcome to GeeksforGeeks</small> Visible
</h1>
<h1>
Given line is <small class="line2">
Welcome to GeeksforGeeks</small> Hidden
</h1>
</body>
</html>
|
Output:
Example 2: Using Collapse property value.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
table.geeks {
/* collapse value to delete row and
column from table */
visibility: collapse
}
table,
th,
td {
border: 1px solid red;
p {
color: green;
font-size: 25px;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">GeeksForGeeks</h1>
<h2>visibility:collapse;</h2>
<p>geeksforgeeks</p>
<table style="border:1px solid red;" class="geeks">
<tr>
<th>geeks</th>
<th>for</th>
<th>geeks</th>
</tr>
</table>
<p>A computer science portal for geeks</p>
</center>
</body>
</html>
|
Output:
Supported Browser:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...