Now we have learn that the visibility property decides whether the element should be visible or hidden. Let's create a web page named visibility.html to understand the working of the visibility property.
<!doctype html>
<head>
<title>visibility property </title>
<style>
.visible {
visibility :visible;
}
.hidden{
visibility:hidden;
}
</style>
</head>
<body>
<h1>Working with visibility property</h1>
<p class="hidden">This is the first paragraph is hidden</p>
<p class="visible">this is the second paragraph is visible</p>
</body>
</html>
In this document we have created two paragraphs. First paragraph is hidden and second paragraph is visible.
The output of the above document is:
<!doctype html>
<head>
<title>visibility property </title>
<style>
.visible {
visibility :visible;
}
.hidden{
visibility:hidden;
}
</style>
</head>
<body>
<h1>Working with visibility property</h1>
<p class="hidden">This is the first paragraph is hidden</p>
<p class="visible">this is the second paragraph is visible</p>
</body>
</html>
In this document we have created two paragraphs. First paragraph is hidden and second paragraph is visible.
The output of the above document is:
No comments:
Post a Comment