CSS Introduction

CSS Tutorial What is CSS CSS Syntax CSS Selector How to include CSS CSS Comments

CSS Attributes

CSS Background CSS Border CSS Display CSS Float CSS Font CSS Color CSS Hover CSS Important CSS Line-height CSS Margin CSS Opacity CSS Filter CSS Images CSS Overflow CSS Padding CSS Position CSS Vertical align CSS White space CSS Width Word-wrap in CSS Box-shadow in CSS Text-transform in CSS CSS Outline CSS Visibility CSS Counters CSS Clear fix CSS Icons CSS Justify-content Text-decoration in CSS CSS Lists CSS nth selector CSS Sticky CSS Background-clip CSS Checkbox-style CSS Letter-spacing CSS Navigation bar CSS Overlay CSS Root CSS Specificity CSS Text-indent CSS Text-stroke CSS Zoom CSS Order CSS Descendent selector CSS Clip CSS calc() CSS Background-blend-mode CSS radio-button CSS Superscript and subscript CSS Text-effects CSS Text-align CSS Variables CSS Page-break-before CSS Page-break-inside CSS Page-break-after CSS Content property CSS Word-spacing CSS Animation CSS @keyframes rules CSS Pseudo-classes CSS Pseudo-elements CSS Radial-gradient CSS Translate CSS Gradients CSS z-index CSS Loaders CSS Units CSS Transition CSS Masking CSS Arrow CSS Pagination

Misc

What is Bootstrap CSS What is CSS used for Difference between HTML and CSS How to center a table in CSS What is a CSS File How to center a button in CSS How to change background color in CSS How to change the font in CSS How to change font size in CSS How to resize an image in CSS How to get rid of bullet pioints in CSS Is CSS a programming language Grid Vs Flexbox in CSS How to edit CSS in WordPress How to use google fonts in CSS

CSS Visibility

Visibility in CSS: This visibility property in CSS is employed to describe whether the components are visible or not.

Note: An invisible component also grabs the space over the page. If we use display property, we can create hidden component, which does not grab any space.
Syntax:

visibility: visible| hidden| collapse| initial| inherit;

Visibility Attributes

AttributesDescription
visibleThis attribute is used as a default value. The visible attribute describes that a component is visible.
hiddenIt describes that the component is invisible (still grab the space).
collapseThis value is only applied to various tables. It can also be applied to remove the row and the column, but it will not disturb the layout of a table. The space grabbed by the column and row will be applicable for various other contents. When collapse value is applied to any other content, it delivers as “hidden.”
initialThis value is employed to set-up the visibility attribute to its default value.
inheritThis value can acquire this attribute from the parent element.

Visibility Example

<!DOCTYPE html>
<html>
<head>
<style>
h1#visible
{
 visibility: visible;
}
h1#hidden
{
 visibility: hidden;
}
</style>
</head>
<body>
<h1 id= "visible"> This is visible </h1>
<h1 id= "hidden"> This is invisible </h1>
<p>
<strong>
Note:
</strong>
An invisible component also grabs the space over the page.
If we use display property, we can make invisible component that do not grab any space.
</p>
</body>
</html>

Output:

CSS Visibility

JavaScript Syntax:

object.style.visibility=  “hidden”;

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV
{
 margin: left;
 width: 400px;
 height: 200px;
 background-color: lightblue;
 border: 1px solid black;
}
</style>
</head>
<body>
<p> Click on the "Click Here" button to set the visibility attribute and hide the div component.
</p>
<button onclick= "myFunction()">Click Here</button>
<div id="myDIV">It is my DIV component.</div> 
<p><strong>Note:</strong>
An invisible component also grabs the space over the page. </p> 
<script> 
function myFunction() { 
    document.getElementById("myDIV").style.visibility = "hidden"; 
} 
</script>
</body>
</html>

Output:

CSS Visibility



ADVERTISEMENT
ADVERTISEMENT