Home >>CSS Tutorial >CSS Visibility

CSS Visibility

CSS Visibility

The CSS visibility property is used to specify whether an element is visible or not in the web browser. An invisible also take up the space on the page. You may create an invisible element that don’t take up space by using display property.

You can use this property along with the JavaScript to create a very complex webpage layout. You can also use the display property to hide and delete an element or to remove element from the browser.

CSS Syntax
visibility: visible|hidden|collapse|initial|inherit;

Property Values

Value Description
Visible It is Default value, the element is visible to the user.
Hidden The element is hidden but they still affect the layout of the page.
Collapse This value is only used with dynamic table columns and rows effect, it does not affect the table layout by removing a row or column.
Initial It can be sets this property to its default value
Inherit This value is used to define that it inherits this property from its parent element.

Let's take an Example of CSS Visibilty:

<!DOCTYPE html>
<html>
<head>
<style>
h3.a {
  visibility: visible;
}
h3.b {
  visibility: hidden;
}
</style>
</head>
<body>
<h1>The visibility Property</h1>
<h3 class="a">This is a Visible heading</h3>
<h3 class="b">This is a hidden heading</h3>
<p>Note:The hidden heading still takes up space on the page.</p>
</body>
</html>
Output:

The visibility Property

This is a Visible heading

This is a hidden heading

Note:The hidden heading still takes up space on the page.

Let's take an example of table element Collapse:

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
  border: 1px solid black;
}
tr.collapse {
  visibility: collapse;
}
</style>
</head>
<body>
<h1> Table Element Collapse</h1>
<table>
  <tr>
    <td>Ram</td>
    <td>Shyam</td>
  </tr>
  <tr class="collapse">
    <td>sita</td>
    <td>geeta</td>
  </tr>
</table>
</body>
</html>
Output:

Table Element Collapse

Ram Shyam
sita geeta

Popular Tutorials