- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursors
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS Advanced
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Media Types
- CSS - Paged Media
- CSS - Aural Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS3 - Rounded Corner
- CSS3 - Border Images
- CSS3 - Multi Background
- CSS3 - Color
- CSS3 - Gradients
- CSS3 - Shadow
- CSS3 - Text
- CSS3 - Web font
- CSS3 - 2d transform
- CSS3 - 3d transform
- CSS3 - Animation
- CSS3 - Multi columns
- CSS3 - User Interface
- CSS3 - Box Sizing
- CSS Responsive
- CSS - Responsive Web Design
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
Usage of CSS visibility property
A property called visibility allows you to hide an element from view. You can use this property along with JavaScript to create very complex menu and very complex webpage layouts.
The visibility property can take the values listed in the table that follows
| Value | Description |
|---|---|
| visible | The box and its contents are shown to the user. |
| hidden | The box and its content are made invisible, although they still affect the layout of the page. |
| collapse | This is for use only with dynamic table columns and row effects. |
Example
You can try to run the following code to learn how to work with visible and hidden values
<html>
<head>
<style>
p {
visibility: hidden;
}
</style>
</head>
<body>
<p style = "visibility:visible;">
This paragraph is visible.
</p>
<p>
This paragraph won't be visible.
</p>
</body>
</html>
- Related Articles
- CSS backface-visibility Property
- Usage of CSS perspective property
- Usage of CSS grid property
- Usage of CSS transition-delay property
- Usage of transform property with CSS
- Usage of background property in CSS
- Usage of font property in CSS
- Usage of direction property in CSS
- Usage of color property in CSS
- Usage of border property with CSS
- Usage of width property with CSS
- Usage of height property with CSS
- Usage of CSS border-collapse property
- Usage of CSS caption-side property
- Usage of CSS empty-cells property
Advertisements