r4r Right place for Right person^®

CSS Tutorials

R4R^® CSS

CSS Examples

How to make margin on page

Sample page template of CSS

CSS Interview Materials

CSS subjective question

CSS Interview question

CSS Objective question

CSS FAQS

(追記) (追記ここまで)

adplus-dvertising

(追記) (追記ここまで)

Visibitlity In CSS

Previous Home Next

The visibility property determines whether an element is visible or hidden.This property specifies whether an element is visible-that is, whether the box(es) that are generated by an element are rendered.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.

The CSS visibility property can take the values listed in given below:

visible: It is default value. The box and its contents are visible.In which the box and its contents are shown to the user.

p.visible {
visibility:visible;
}

hidden:In which content can't visible because its always used for hiding the content or invisible the content of a box.The box and its content are made invisible, although they still affect the layout of the page.

p.hidden {
visibility:hidden;
}

collapse: This value causes the entire row or column to be removed from the display. This value is used for row, row group, column, and column group elements.This is for use only with dynamic table columns and row effects.

p.collapes {
visibility:collapse;
}

inherit: Specifies that the value of the visibility property should be inherited from the parent element i.e. takes the same visibility value as specified for its parent.

p.inherit {
visibility:inherit;
}

(追記) (追記ここまで)

Simple Example

<html>
<head>
<style>
p.collapes {
visibility:collapse;
}
p.hidden {
visibility:hidden;
}
p.inherit {
color:#0033FF;
visibility:inherit;
}
p.visible {
color:#0033ff;
visibility:visible;
}
</style>
</head>
<body>
<p class="collapes">this is used to show collapes property</p>
<p class="hidden">this is used to show hidden property</p>
<p class="inherit">this is used to show inherit property</a>
<p class="visible">this is used to show visible property</a>
</body>
</html>

Output

Previous Home Next

(追記) (追記ここまで)

Web technology Topics