CSS Visibility Property Tutorial with Examples – POFTUT

CSS Visibility Property Tutorial with Examples

The CSS provides the visibility attribute in order to show, collapse and hidden some HTML elements. Visibility element usage is very simple where we have to provide values like visible, hidden , collapse. The visibility CSS attribute is supported by all major browsers like Google Chrome, Mozilla Firefox, Opera, Internet Explorer, Microsoft Edge, and mobile versions.

Syntax

CSS visibility attribute has the following syntax.

  • visibility is the attribute we will use.
  • VALUE is the visibility attribute value that can be visible, hidden and collapse.

Visibility Attribute Visible Value

We can make an HTML element visible by setting the visible value to the  visibility CSS attribute like below. The visible value is the default value for the visibility attribute. So if the element is visible we do not have to set the visible value to make it visible.

CSS Visibility Attribute Visible Value

CSS Visibility Attribute Visible Value

Visibility Attribute Hidden Value

We can also make some elements invisible or hidden by using the visibility attribute. We will set the value hidden for the visibility attribute like below. In the following example, we will set the h1 elements invisible.

 

Visibility Attribute Hidden Value

Visibility Attribute Hidden Value

We can see from the screenshot that the H1 elements are hidden but their places and areas do not collapse.

Visibility Attribute Collapse

The visibility attribute also accepts the collapse value which can be useful for table rows and columns. By using this value the given row or column can be removed and space can be used for other elements. If the collapse value is used for other elements it will assumed as hidden.

Visibility Attribute Collapse

Visibility Attribute Collapse

Inherit

If the HTML document is designed in a hierarchical manner and we want to use the visibility attribute from the parent elements we can use inherit value or keyword which will get the parents value and set for the current element.

Visibility vs Display Attribute

There is also the attribute named display is functioning similar to the visibility attribute. But there is important difference. Visibility attribute will only hide the given element but the space it takes will be reserved on the other side display attribute will remove the given element completely. In the following example, we will set the h2 element display to the none which will be removed completely where the h1 elements will be only set invisible or hidden where their space is preserved.

Visibility vs Display

Visibility vs Display

Leave a Reply

Your email address will not be published. Required fields are marked *

Enjoy this blog? Please spread the word :)