EDUCBA

Home » Software Development » Software Development Tutorials » CSS Tutorial » Visibility in CSS

Visibility in CSS

Introduction to Visibility in CSS

Visibility means something appearing or able to see. Visibility property used to make visible or hidden content or image from the page. Clear understanding you must know the difference between display and Display property and visibility property both can visible and block the content, but the difference is Visibility property hidden the content without moving or disturbing the below content or its side content. Display property moves the content upwards or side by neglecting the previous content at the place. We will see how it can happen in the below concept. In this topic, we are going to learn about Visibility in CSS.

How do Visibility and Display properties work in CSS?

Visibility property can work with 2 values

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

  1. hidden
  2. visible

Syntax:

Class1
{
visibility: hidden;
}
Class2
{
visibility : visible;
}

Explanation:

  • Visibility: hidden, hidden the content without moving the content downwards or side from a page.
  • Visibility: visible, visible the hidden content from a page.
Note: Cannot apply hidden and visible properties at a time for a single class.

Example:

Class1
{
visibility: hidden;
visibility: visible;
}

If you are trying to apply both values in single class second value property always overrides.

Display property can work with 4 values

  1. block
  2. none
  3. inline
  4. inline-block

Explanation:

  • Display: block, starts the content from the new line.
  • Display: none, neglecting the previous content at this place and content moves up or side.
  • Display: inline, just like a span tag but without changing height and width.
  • Display: inline-block, just like a span tag with changing of height and width to create nice boxes. We can say it is the replacement of float previous property.
Note: Cannot apply all the properties at a time for a single class as in the Visibility example.

Examples with Code:

  1. Visibility: hidden and display: block with content
  2. Visibility: visible and display: none with content

Before Applying Visibility and Display properties output:

Visibility in CSS output 1

  1. Visibility: hidden and display: block with content: Hidden the content without disturbing the below or side content. You can see the variation in output comparing to before applying visibility and display properties as above.

Syntax:

.hiddenBlock{
display: block;
visibility: hidden;
color: green;
}

Example:

HTML Code: HiddenBlock.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" type="text/css" href="HiddenBlock.css">
<title>Visibility and Display</title>
</head>
<body>
<h1 class="head">Visibility and Display</h1>
<p class="hiddenBlock1">Developed an Enterprise Content Management
online application by using Spring MVC as Back end and JSP, HTML, CSS,
JavaScript and Angular JS as Front end.</p>
<p class="hiddenBlock2">Create a user with user type and admin
type, where admin can allow to perform administration actions like
modify user type and delete the users.</p>
<p class="hiddenBlock3">User can import a task with any document,
it stores in oracle database, create a task by specific data with
comments for task description. Assign same task to other users to
perform actions on it and also multiple users can at a time assign a
task.</p>
</body>
</html>

CSS Code: HiddenBlock.css

.hiddenBlock1{
display: block;
visibility: visible;
color: blue
}
.hiddenBlock2{
display: block;
visibility: hidden;
color: green;
}
.hiddenBlock3{
display: block;
visibility: visible;
color: brown;
}
.head{
color:red;
margin-left: 30%;
}

Output:

Visibility in CSS output 2

  1. Visibility: visible and display: none with content: Ignores the content at the applied paragraph and moves the content upwards or side. You can see the variation in output comparing to before applying visibility and display properties as above.

Syntax:

.visibleNone{
display: none;
visibility: visible;
color: green;
}

Example:

HTML Code: VisibleNone.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" type="text/css" href="VisibleNone.css">
<title>Visibility and Display</title>
</head>
<body>
<h1 class="head">Visibility and Display</h1>
<p class="visibleNone1">Developed an Enterprise Content Management
online application by using Spring MVC as Back end and JSP, HTML, CSS,
JavaScript and Angular JS as Front end.</p>
<p class="visibleNone2">Create a user with user type and admin
type, where admin can allow to perform administration actions like
modify user type and delete the users.</p>
<p class="visibleNone3">User can import a task with any document,
it stores in oracle database, create a task by specific data with
comments for task description. Assign same task to other users to
perform actions on it and also multiple users can at a time assign a
task.</p>
</body>
</html>

CSS Code: VisibleNone.css

.visibleNone1{
display: block;
visibility: visible;
color: blue
}
.visibleNone2{
display: none;
visibility: visible;
color: green;
}
.visibleNone3{
display: block;
visibility: visible;
color: brown;
}
.head{
color:red;
margin-left: 30%;
}

Output:

output 3

  • We may get a doubt that is there any other way to hide the content without using visibility: hidden.
  • Yes, we have such properties to do that.

Other properties to hide the content without using visibility: hidden: They are

  1. Color: rgb(0,0,0,0)
  2. Opacity: 0
  1. Color: rgb(0,0,0,0): This property also makes content invisible to the naked eye as visibility: hidden did. But content still exists. You can see below output is the same as visibility output.

Syntax:

.colorRGB{
color: rgb(0,0,0,0);
font-size: 25px;
}

Example: ColorRGB.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" type="text/css" href="ColorRGB.css">
<title>Visibility and Display</title>
</head>
<body>
<h1 class="head">Visibility and Display</h1>
<p class="color1">Developed an Enterprise Content Management online
application by using Spring MVC as Back end and JSP, HTML, CSS,
JavaScript and Angular JS as Front end.</p>
<p class="color2">Create a user with user type and admin type,
where admin can allow to perform administration actions like modify
user type and delete the users.</p>
<p class="color3">User can import a task with any document, it
stores in oracle database, create a task by specific data with
comments for task description. Assign same task to other users to
perform actions on it and also multiple users can at a time assign a
task.</p>
</body>
</html>

CSS Code: ColorRGB.css

.color1{
display: block;
visibility: visible;
color: blue;
font-size: 20px;
}
.color2{
color: rgb(0,0,0,0);
font-size: 20px;
}
.color3{
display: block;
visibility: visible;
color: brown;
font-size: 20px;
}
.head{
color:red;
margin-left: 30%;
}

Output:

output 4

  • Opacity: 0: This property also makes invisible content to the naked eye as visibility: hidden, but content still exists. You can see below output is the same as visibility output.

Syntax:

.opacity{
opacity: 0;
font-size: 25px;
}

HTML Code: Opacity.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" type="text/css" href="Opacity.css">
<title>Visibility and Display</title>
</head>
<body>
<h1 class="head">Visibility and Display</h1>
<p class="opacity1">Developed an Enterprise Content Management
online application by using Spring MVC as Back end and JSP, HTML, CSS,
JavaScript and Angular JS as Front end.</p>
<p class="opacity2">Create a user with user type and admin type,
where admin can allow to perform administration actions like modify
user type and delete the users.</p>
<p class="opacity3">User can import a task with any document, it
stores in oracle database, create a task by specific data with
comments for task description. Assign same task to other users to
perform actions on it and also multiple users can at a time assign a
task.</p>
</body>
</html>

CSS Code: Opacity.css

.opacity1{
display: block;
visibility: visible;
color: blue;
font-size: 20px;
}
.opacity2{
opacity: 0;
font-size: 20px;
}
.opacity3{
display: block;
visibility: visible;
color: brown;
font-size: 20px;
}
.head{
color:red;
margin-left: 30%;
}

Output:

output 5

Conclusion

We can hide the content with visibility property, opacity property, and color: grbproperty. It does not move the content upwards or side by applying visibility property.

Recommended Articles

This is a guide to Visibility in CSS. Here we discuss how do visibility and display properties work in CSS along with the examples and outputs. You may also have a look at the following articles to learn more –

  1. CSS Inline Style
  2. CSS Font Properties
  3. CSS Text Formatting
  4. CSS Overflow
0 Shares
Share
Tweet
Share
quiz