Introduction to CSS Visibility
The visibility property in CSS is used to control whether elements are visible on the webpage or whether it isn’t. But the elements hidden with visibility property do occupy space on the webpage. To overcome this people usually, we use the display property with value none to hide as well as to delete the element.
Syntax:
The visibility property can work with four values visible, hidden, collapse, initial and inherit. It can be set with the following syntax:
visibility : visible | hidden | collapse | initial | inherit | unset
Property Value of Visibility in CSS
Examples for the property value of visibility in CSS are given below:
1. Hidden Value for Visibility Property
It hides the element from the webpage. Though it hides the element from view the element still continues to occupy space on the webpage depending on its height and width. Let’s understand this behavior with the below example:
Example:
Let’s create a file by the name try.php with the following content:
4.5 (2,560 ratings)
View Course
Code:
<!DOCTYPE html>
<html>
<head>
<title>
This is an example for visibility property in CSS with value Hidden.
</title>
<style>
h1 {
color : blue ;
}
.checkme {
Visibility : hidden ; // defining the value for visibility
}
body {
text-align : center ;
}
</style>
</head>
<body>
<h1> Edu CBA </h1>
<h2> The element’s visibility is set to hidden </h2>
<p class="checkme"> This text is not visible in the browser. </p>
</body>
</html>
Code Explanation: The above code when executed in the browser, shows the following output where the text “We are a technology portal for techies. We provide tutorials for all the latest technologies and this tutorial we are learning about the Visibility property in CSS.” is hidden:
Output:
2. Visible Value for Visibility Property
The visibility CSS property when assigned value “visible” unhides the element from the webpage and is also the default value for the CSS property. Let’s see it in action with the below example.
Example:
Now, let’s change the property value in .checkme call to “visible” instead of “hidden”.
Code:
<!DOCTYPE html>
<html>
<head>
<title>
This is an example for visibility property in CSS with value visible.
</title>
<style>
h1 {
color : blue ;
}
.checkme {
Visibility : visible ; // Visibility values changed to visible
}
body {
text-align : center ;
}
</style>
</head>
<body>
<h1> Edu CBA </h1>
<h2> visibility is set to visible </h2>
<p class="checkme">
We are a technology portal for techies. We provide tutorials for all the latest technologies and this tutorial we are learning about the Visibility property in CSS.
</p>
</body>
</html>
The above code produces the below output :
Output:
3. Collapse
The collapse value for CSS visibility is used for rows, columns, row groups, and column groups. The rows and columns with this property remain hidden from the web page view, but the other and columns of the same table continue to be laid out as though the hidden rows, columns, row groups, and column groups were actually visible. This value was devised specially for quick removal of row or column elements without having to calculate the width and height of every other row or column associated to it. The only problem with using visibility value collapse is that it is not fully supported by all modern-day browsers. Hence most of the official CSS documentation recommends not using it for current age web design.
Example:
Let’s understand the working style of Collapse a bit more in detail with the following example.
Code:
<!DOCTYPE html>
<html>
<head>
<title>
This is an example for visibility property in CSS with value visible.
</title>
<style>
.checkme {
Visibility : collapse ;
}
table {
Border : 1px solid red ;
}
td {
border : 1px solid gray;
}
body {
text-align : center ;
}
</style>
</head>
<body>
<table>
<tr>
<td>1.1</td>
<td class="checkme">1.2</td>
<td>1.3</td>
</tr>
<tr class="checkme">
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
</body>
</html>
On executing the above code, the output would be as follows in the browser window :
Output:
We clearly see that the cell with the collapse CSS value is not visible but does continue to occupy the space in the browser.
4. Initial Value for Visibility CSS Property
The value of Visibility property, when set to initial, indicates that the element has to refer to the initial value for the property.
5. Inherit Value for CSS Visibility
When a child elements value is set to inherit, it has taken the calculated value of the parent element.
6. Unset Value for CSS Visibility Property
When an elements value I set to unset it may be either set to initial or inherit. It depends if the parent’s value is set, if not then it behaves like initial value.
Recommended Articles
This is a guide to CSS Visibility. Here we discuss the Introduction and how the visibility property works with the different values that it provides. You may also have a look at the following articles to learn more –
