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

« Previous Next »

CSS Tutorial What is CSS CSS Syntax CSS Selectors How to add CSS CSS Colors CSS Comments CSS Background CSS Border CSS Display property How do I hide an element when printing a web page CSS Float CSS Font CSS Line Height CSS Opacity property CSS Overflow CSS Padding CSS Margin property CSS Position CSS Vertical align CSS White Space CSS Width CSS Word Wrap CSS Outline CSS Visibility CSS Media Queries CSS Animation CSS Gradient CSS Transition CSS Tooltips CSS Tooltip Animation CSS Arrow CSS Flexbox CSS 2D Transforms CSS 3D Transform CSS Aural Media CSS User Interface CSS Pagination CSS Table

No Sidebar ads