Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to Work with CSS Display and Visibility Properties

This article will cover the CSS Visibility and Display properties. I will use some CSS and javascript examples to demo the functionality.

Introduction:

This tutorial will help you to understand the standard HTML elements and properties responsible for controlling the display and visibility of elements. The aim of the display property is to specify how an element will be displayed. Being one of the most difficult aspects of creating a page, display property teaches to control the line breaks without the use of tables.

Sometimes developers create such objects in HTML which need not to be shown till specific point of time or it should be shown as a block, CSS display makes this possible. The most fundamental types of display are inline, block-line and none. One can use the CSS element with many values but can only be manipulated with the display property and the values-inline, block and none. This tutorial will cover the each property individually.

Display Inline Property:

An inline box, i.e. no line break before and after the element, will be displayed. The impact of inline property is same as its name i.e. elements that are displayed inline follow the flow of a line. Traditionally strong, anchor and emphasis elements are displayed inline.

In listed example we have taken 2 classes of inline property, first is div.inlineDisplay i.e. it holds the definition of {display: inline;} and second is that it holds the display definition property li{display:inline;}. First section of declaration are displaying five images where we can see no line break before and after the element and second declaration is also following the inline property in which six links are getting displayed where we can see no line break before and after the element. Listed example will clear the concept.

Listing 1: Script of inline property

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.inlineDisplayExample 
{display: inline;}
li{display:inline;}
</style>
</head>
<h3> 5 Images Following {display: inline;} Property: </h3>
<div class="inlineDisplayExample">
 <a target="_blank" href="abcd.htm"><img class='imagem_artigo' src="img1.jpg" alt="img1" width="110" height="90" /></a>
 </div>
<div class="inlineDisplayExample">
 <a target="_blank" href="abcd.htm"><img class='imagem_artigo' src="img2.jpg" alt="img2" width="110" height="90" /></a>
 </div>
<div class="inlineDisplayExample">
 <a target="_blank" href="abcd.htm"><img class='imagem_artigo' src="img3.jpg" alt="img3" width="110" height="90" /></a>
 </div> 
<div class="inlineDisplayExample">
 <a target="_blank" href="abcd.htm"><img class='imagem_artigo' src="img4.jpg" alt="img4" width="110" height="90" /></a>
</div>
<div class="inlineDisplayExample">
 <a target="_blank" href="abcd.htm"><img class='imagem_artigo' src="img5.jpg" alt="img5" width="110" height="90" /></a>
</div>
<H3>6 Links Below Given are Displaying Horizontal Menu without Line Break</H3>
<ul>
<li><a href="/a/default.asp" target="_blank">Link   A</a></li> 
<li><a href="/b/default.asp" target="_blank">Link   B</a></li>
<li><a href="/c/default.asp" target="_blank">Link   C</a></li>
<li><a href="/d/default.asp" target="_blank">Link   D</a></li>
<li><a href="/e/default.asp" target="_blank">Link   E</a></li>
<li><a href="/f/default.asp" target="_blank">Link   F</a></li>
</ul>
 </body>
</html>
Above figure is output of display inline script in which HTML elements are following the specified display property

Figure 1: Above figure is output of display inline script in which HTML elements are following the specified display property.

Display Block Properties:

This property takes up the full width available, with a new line before and after. Header and paragraph elements are examples of elements that are traditionally displayed in block-line.

tags and

tags are naturally displayed block-style.

In below example we have taken 2 classes of display block properties, first is, div.blockDisplay i.e. it holds the definition of {display: block;} and second is that it holds the display definition property block {display:block;}. First section of declaration are displaying 3 images in vertical manner, images are taking full available width with a new line before and after and same thing happening around. In second class 3 separate paragraph is printed using {display:block;} property. Example is here:

Listing 2: Script of Block Property

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.blockDisplayExample 
{display: block;}
blocExample
{
display:block;
}
</style>
</head>
 <body>
<h3> Three Images Displayed on Page Following {Display:Blcok} Property</h3>
<div class="blockDisplayExample">
 <a target="_blank" href="abcd.htm"><img class='imagem_artigo' src="img1.jpg" alt="Flower" width="510" height="30" /></a>
 </div>
<div class="blockDisplayExample">
 <a target="_blank" href="abcd.htm"><img class='imagem_artigo' src="img2.jpg" alt="Flower" width="510" height="30" /></a>
 </div>
<div class="blockDisplayExample">
 <a target="_blank" href="abcd.htm"><img class='imagem_artigo' src="img5.jpg" alt="Flower" width="510" height="30" /></a>
</div>
<H3> List items showing Data of Presidents of the United States Following {Display:Blcok} Property</H3>

<h5>George Washington</h5>
<blocExample> Took office :1789</blocExample>
<blocExample> Left office :1797</blocExample>
<blocExample>Dead/Live: death</blocExample>
<h5>Thomas Jefferson</h5>
<blocExample> Took office :1801</blocExample>
<blocExample> Left office :1809</blocExample>
<blocExample>Dead/Live: dead</blocExample>
<h5>Barak Obama</h5>
<blocExample> Took office :2009</blocExample>
<blocExample> Left office :present</blocExample>
<blocExample>Dead/Live: Live</blocExample>

 </body>
</html>
 
Above figure output of {display:block} script in which HTML elements are following the specified CSS display property

Figure 2: Above figure output of {display:block} script in which HTML elements are following the specified CSS display property.

Display none Property:

As the name suggests “none,” it does not display the elements on page. Developers want to hide pieces of content but that does not mean all contents instead they wish to show some of it as well. For this we have to use display none property

For using none property we have taken previous example in which we are hiding images and paragraph from pages. Listed example will clear the concept:

Listing 3: Script of none Property

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.noneDisplayExample 
{display:none;}

noneExample
{
display:none;
}

</style>
</head>
<body>
<h3> Displayed text is not following {Display:none} Property (Image Hide in previous example)</h3>
<div class="noneDisplayExample">
 <a target="_blank" href="abcd.htm"><img class='imagem_artigo' src="img1.jpg" alt="Flower" width="510" height="30" /></a>
 </div>
<div class="noneDisplayExample">
 <a target="_blank" href="abcd.htm"><img class='imagem_artigo' src="img2.jpg" alt="Flower" width="510" height="30" /></a>
 </div>
<div class="noneDisplayExample">
 <a target="_blank" href="abcd.htm"><img class='imagem_artigo' src="img5.jpg" alt="Flower" width="510" height="30" /></a>
</div>
<H3> Displayed text is not following {Display:none} Property (Paragraph Hide in previous example)</H3>

<h5>George Washington</h5>
<noneExample> Took office :1789</noneExample>
<noneExample> Left office :1797</noneExample>
<noneExample>Dead/Live: death</noneExample>
<h5>Thomas Jefferson</h5>
<noneExample> Took office :1801</noneExample>
<noneExample> Left office :1809</noneExample>
<noneExample>Dead/Live: dead</noneExample>
<h5>Barak Obama</h5>
<noneExample> Took office :2009</noneExample>
<noneExample> Left office :present</noneExample>
<noneExample>Dead/Live: Live</noneExample>
<p> Paragraph and images from previous example are not displaying in this example. They are following {Display:none} property </p>
 </body>
</html>
 
output of script of {display: none ;} property.

Figure 3: Above figure is output of script of {display: none ;} property.

Displaying/Hiding Element Using Display and Visibility Property:

The basic aim of using the display property to "none" or the visibility property to "hidden" is to hide the element. However, you might have noticed that these two methods produce different effects.

Property 1: hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the final layout.

Property 2: none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there. Following example will compile the idea of the difference between visibility property and display none property.

Listing 4: Script of Display / Visibility Property

<!DOCTYPE html>
<head>

<style type="text/css">
#page {width:600px; margin:50px auto; text-align: center}
h1 {font-size:20px; color:#9933BB}

#page p {text-align: left}
#red{height:30px; background:red; color:#fff; text-align: center; padding-top: 50px}
#greenShade {height:30px; background:green; color:#fff; text-align: center; padding-top: 50px; display:block; visibility: visible}
#blue {height:30px;background:blue; color:#fff; text-align: center; padding-top: 50px}

</style>

<script type="text/javascript">

function toggleDisplay()
{
	var greenShade = document.getElementById('greenShade');
	if(greenShade.style.display == "none")
	{
		greenShade.style.display = "block";
	}
	else
	{
		greenShade.style.display = "none";	
	}	
}

function toggleVisibility()
{
	var greenShade = document.getElementById('greenShade');
	if(greenShade.style.visibility == "hidden")
	{
		greenShade.style.visibility = "visible";
	}
	else
	{
		greenShade.style.visibility = "hidden";	
	}	
}

</script>
</head>
<body>
<div id="page">
	<h1>Example of Display and visibiity Property:</h1>
	<p></p>
	<div id="links"><a id="visibility" href="#" onclick="toggleVisibility();">Click to see Visibility Effect </a>  |  <a id="display" href="#" onclick="toggleDisplay();">Click to see Display property</a></div>
	<div id="red">Red Shade</div>
	<div id="greenShade">(Use Display/visibility Property and see the effect of this block) </div>
	<div id="blue">Blue Shade</div>
	
</div>
</body>
</html> 
figure is example of display and visibility property. You can see the effects of individual property by toggling the each link button shown in figure

Figure 4: Above figure is example of display and visibility property. You can see the effects of individual property by toggling the each link button shown in figure.

Conclusion:

CSS display property takes various values like inline, block, none. Tutorial covered these three basic properties. A sub section took into account the comparison between the visibility property and display property. Hope it will help you to understand the basics and give you a base to play with these properties. If you have any queries please comment.



I am Software Developer from India. I hold B.Tech. in Computer Science & Engineering. I am having 2+ years experience of developing Web applications and Websites using HTML, JavaScript, CSS, C#.NET etc..

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login