Css Display And Visibility

CSS display  :

The display property is used to how to display any property and visibility indicates if any element should be visible or hidden.

Example for visibility : For example I have take tow heading tag for visible and hidden. That means I am going to show you how you can hide any property by css display visibility.

Syntax:

Selector {visibility:hidden;}

Example:

<html>

<head>

<style type="text/css">

#hidden{visibility:hidden;}

</style></head>

<body>

<h1>This is visible.</h1>

<h2 id="hidden">This is hidden.<h2>

</body>

<html>

Look at the <h2> tag. This can not show on your browser. This is the use of visibility.

Output: css display  visiblity property

 

By the display property you can also hide anything. For this you just need to indicate the value none.

Syntax:

 selector{display:none}

Example:

<html>

<head>

<style type="text/css">

#hidden{display:none;}

</style></head>

<body>

<h1>This is visible.</h1>

<h2 id="hidden">This is hidden.<h2>

</body>

<html>

The h2 also hidden here for display property and none value. It is also a system for hidden something.

Output:  css display none

 

Block and inline element:

A block element is an element that takes up the full width available, and has a line break before and after it. <h1> is a such types of tag. An inline element only takes up as much width as necessary, and does not force line breaks. <a> tag is a inline element.

Changing the system of how any element displayed:  Changing list item as a inline element by display property.

Syntax:

li{display:inline;}

Example:

<html>

<head>

<style type="text/css">

li{display:inline;}

</style>

</head>

<body>

<p>This is a horizontal menu:</p>

<ul>

<li><a href="http://h2cweb.net/blog/html/" target="_blank">HTML</a></li>

<li><a href="http://h2cweb.net/blog/css/" target="_blank">CSS</a></li>

<li><a href="http://h2cweb.net/blog/wordpress/" target="_blank">Wordpress</a></li>

</ul>

</body>

</html>

Output:css display change

Table collapse:

Collapse means decline or failure  something. In table sometime we need to collapse some table raw or column. For decline them we used collapse property.

Syntax:

 selector {visibility:collapse;}

Example:

<html>

<head>

<style type="text/css">

tr.collapse {visibility:collapse;}

</style>

</head>

<body>

<table border="1">

<tr>

<td>Jemee</td>

<td>Roy</td>

</tr>

<tr>

<td>Liton</td>

<td>Arefin</td>

</tr>

</table>

</body>

</html>

Output:css display table collapse
This is the css display. It can shows and hide some thing from web page. For that it called css display. Display doesn’t mean to show something but also hide something. css position is also necessary for css display.

Roy Jemee is a professional Blogger. Apart of blogging he likes to play with mathematics. He knows Blogging, Wordpress, PHP, javascript , SEO and some other.