Visibility in CSS Language

In the world of web development, CSS (Cascading Style Sheets) plays a crucial role in controlling the appearance and layout of

web pages. One fundamental aspect of CSS is controlling the visibility of elements on a webpage. Whether you want to hide or show an element, or even make it partially transparent, CSS provides a variety of tools to achieve these effects. In this post, we will explore the different ways to control visibility in CSS with examples.

1. Display Property:

The most basic way to control visibility is by using the display property. This property can take several values, but the most common ones for controlling visibility are none and block.

Example:

.hidden {
  display: none;
}

.visible {
  display: block;
}

HTML:

<div class="hidden">This is a hidden element.</div>
<div class="visible">This is a visible element.</div>

In the example above, the element with the class “hidden” will not be displayed, while the element with the class “visible” will be visible on the webpage.

2. Opacity Property:

The opacity property allows you to control the transparency of an element. A value of 0 means the element is completely transparent, while a value of 1 means it’s fully opaque.

Example:

.transparent {
  opacity: 0.5;
}

HTML:

<div class="transparent">This is a semi-transparent element.</div>

In this example, the element with the class “transparent” will be 50% transparent.

3. Visibility Property:

The visibility property is used to hide or show an element without affecting the layout of the page. It can take two values: visible and hidden.

Example:

.hidden {
  visibility: hidden;
}

.visible {
  visibility: visible;
}

HTML:

<div class="hidden">This is a hidden element.</div>
<div class="visible">This is a visible element.</div>

In this case, the element with the class “hidden” will be hidden, but it will still occupy space in the layout, while the element with the class “visible” will be fully visible.

4. z-index Property:

The z-index property is used to control the stacking order of elements. Elements with higher z-index values will be displayed in front of elements with lower values.

Example:

.front {
  z-index: 1;
}

.back {
  z-index: 0;
}

HTML:

<div class="back">Behind</div>
<div class="front">In Front</div>

In this example, the “front” element will be displayed in front of the “back” element due to its higher z-index value.