in

CSS VISIBILITY | Steps to Set the Visibility of Elements on Web Pages

In this tutorial we will be looking at CSS visibility and how you can set the display or hide the visibility of contents on your web page. In our previous tutorial we looked at CSS SCROLLBARS and why you need them on your web document. If you haven’t gone through the tutorial you can do so using the link below

Read previous tutorial on: CSS SCROLLBARS | Set Scrollbars On Web Pages Using CSS

CSS VISIBILITY

As the name implies CSS provides us with a visibility property which can be used to hide element or content on a web page. This property can be used to hide information that needs to be displayed when a user carries out an action or can be used to hide error messages from a user. This property should not be used to hide information such as credit card information’s because such information will be displayed on the web page source code.

Below are the list of values that can be accepted by the CSS visibility property

  • visible – This is used to display the content or element of the web page
  • hidden – This is used the hide the content or element of the web page
  • collapse- This is used with only dynamic tables columns

The visible and hidden Visibility property

Both properties are used to display or hide the content of a web page. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <title>ILLUSTRATION OF VISIBLE AND HIDDEN VISIBILITY PROPERTY</title>
</head>
<body>
   <p style="visibility: hidden;" >
      ILLUSTRATION OF HIDDEN VISIBILITY PROPERTY 
   </p>
   <br>
   <p style="visibility: visible;" >
      ILLUSTRATION OF VISIBLE VISIBILITY PROPERTY 
   </p>
</body>
</html>

RESULT

ILLUSTRATION OF VISIBLE AND HIDDEN VISIBILTY PROPERTY

ILLUSTRATION OF HIDDEN VISIBILITY PROPERTY


ILLUSTRATION OF VISIBLE VISIBILITY PROPERTY

CONCLUSION

As said earlier we use the visibility property to control the visibility of an element or content of a web page. This is very important when you intend hiding a section or content of the web page from the users. Lets move to the next tutorial on CSS POSITIONING

What do you think?

css scrollbars

CSS SCROLLBARS | Set Scrollbars On Web Pages Using CSS

css positioning

CSS POSITIONING | Set The Position Of Web Page Elements Using CSS