Your Course Progress

Topics
0 / 0
0.00%
Practice Tests
0 / 0
0.00%
Tests
0 / 0
0.00%
Assignments
0 / 0
0.00%
Content
0 / 0
0.00%
% Completed

CSS Visibility

Control the Visibility of HTML Elements

In web development, the CSS `visibility` property controls the visibility of HTML elements without altering their layout or space. It's key for creating dynamic web pages where elements can be shown or hidden based on user interactions or conditions.

In web development, the CSS `visibility` property plays a crucial role in controlling the visibility of HTML elements on a webpage. It allows you to make elements visible or hidden without affecting their layout or space allocation. This property is essential for creating dynamic and interactive web pages, where elements can be shown or hidden based on user interactions, events, or conditions.

The `visibility` property in CSS determines whether an element is visible or not. It can be set to one of several values to control the element's visibility.

/* Example of using visibility property */
.my-element {
  visibility: visible; /* Default value, element is visible */
}

.hidden-element {
  visibility: hidden; /* Element is hidden but still occupies space */
}

The `visibility` property accepts the following values:

  • visible: The element is visible and rendered on the page. This is the default value.
  • hidden: The element is hidden and not rendered. However, it still occupies space in the layout.
  • collapse: (Applies to table elements) The element is hidden, but the table layout is recalculated as if it were visible. This value is not widely supported.
  • inherit: The element inherits its visibility from its parent element.
Do You Know?

The `visibility` property is often confused with the `display` property. While both affect element visibility, they behave differently:

  • visibility:  Hides an element while maintaining its space allocation.
  • display:  Removes an element entirely, making it invisible and freeing up the occupied space.

Choosing between `visibility` and `display` depends on the desired outcome. If you want an element to be hidden without impacting the layout, use `visibility: hidden`. If you want an element to disappear entirely, use `display: none`.

<div class="my-element">This element is visible</div>
<div class="hidden-element">This element is hidden but still occupies space</div>

In this example, the first div with the class "my-element" will be visible, while the second div with the class "hidden-element" will be hidden but will still reserve space on the page. You can see the effect of this in the rendered HTML output.

Important Note

While `visibility: hidden` hides elements, they remain accessible to screen readers. If you want to completely exclude an element from screen reader access, use `display: none`.

  • The `visibility` property controls the visibility of HTML elements.
  • It allows you to hide elements without affecting the layout.
  • Common values include `visible`, `hidden`, and `inherit`.
  • It's essential to understand the differences between `visibility` and `display` when deciding which property to use.

Discussion