visibility - HTML CSS CSS Property

HTML CSS examples for CSS Property:visibility

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. visibility

Description

The visibility CSS property controls if to show the element.

The following table summarizes the visibility Property.

Item Value
Default value: visible
Applies to:All elements
Inherited: Yes
Animatable: Yes.

Syntax

The syntax of the property is as follows: 


visibility:      visible | hidden | collapse | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
visible show element. This is default.
hidden Hide element, but occupy the area.
collapse For table objects: rows, row groups, columns and column groups.
initial Sets this property to its default value.
inherit take the value of its parent element visibility property.

The example below shows the visibility property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS visibility property</title>
  <style type="text/css">
    .hidden {<!-- w  w  w .  ja  v a 2 s.  c o  m-->
      visibility: hidden;
    }
    .visible {
      visibility: visible;
    }
    div {
      padding: 20px;
      background: #ff0000;
    }
    span {
      padding: 15px;
      background: #00ff00;
    }
    </style>
 </head>
 <body>
  <p>This is a paragraph 1.</p>
  <p class="hidden">This is a paragraph 2.</p>
  <p>This is a paragraph 3.</p>
  <div class="hidden">
   <strong>Parent</strong>
   <span class="visible">Children</span>
  </div>
 </body>
</html>

Related Tutorials