Tutorials Point

  CSS Beginners
  CSS Advanced
  CSS References
  CSS Resources
  Selected Reading

Copyright © 2014 by tutorialspoint

  Home     References     Discussion Forums     About TP  

CSS - Visibility

previous next AddThis Social Bookmark Button


A property called visibility allows you to hide an element from view. You can use this property alongwith Javascript to create very complex menu and very complex webpage layouts.

You may choose to use the visibility property to hide error messages that are only displayed if the user needs to see them, or to hide answers to a quiz until the user selects an option.

NOTE: Remember that the source code will still contain whatever is in the invisible paragraph, so you should not use this to hide sensitive information such as credit card details or passwords.

The visibility property can take the values listed in the table that follows:

visibleThe box and its contents are shown to the user.
hiddenThe box and its content are made invisible, although they still affect the layout of the page.
collapseThis is for use only with dynamic table columns and row effects.

Here is the example:

This paragraph should be visible in normal way.
<p style="visibility:hidden;">
This paragraph should not be visible.

This will produce following result:

This paragraph should be visible in normal way.

This paragraph should not be visible.

To Become more comfortable - Do Online Practice

previous next Printer Friendly