Visibility of text

In this blog we are going to talk about how we can change the visibility of the text to make it visible or not visible at particular place.

ยท

1 min read

Visibility of text

Photo by rivage on Unsplash

Table of contents

No heading

No headings in the article.

In this code, we are going to hide or change the visibility of the text written or the image using html CSS.

<!DOCTYPE html>
<html>
<head>
<style>
body{
    background-color: black;
    color:white;
}
h1.visible {
    visibility: visible;
}
h1.hidden {
    visibility: hidden;
}
</style>
</head>
<body>
<h1 class="visible">I am visible</h1>
<h1 class="hidden">I am invisible</h1>
<p><strong>Note:</strong> An invisible element also take up the space on the page. By using display property you can create invisible elements that don?t take up space.</p>
</body>
</html>

OUTPUT:

Here we have seen that we have applied visibility, due to which we cannot see the text written over there let's remove the property visibility hidden and see:

<!DOCTYPE html>
<html>
<head>
<style>
body{
    background-color: black;
    color:white;
}
h1.visible {
    visibility: visible;
}
</style>
</head>
<body>
<h1 class="visible">I am visible</h1>
<h1 class="hidden">I am invisible</h1>
<p><strong>Note:</strong> An invisible element also take up the space on the page. By using display property you can create invisible elements that don?t take up space.</p>
</body>
</html>


ย