Header Ads Widget

Ticker

6/random

CSS Display

CSS Display

CSS Display


What is display?
Display as term some used for an output so here this relation can be seen because this property can be used to display or hide an element or output.There is another term used for display is visibility.
Syntax
display:value;
Value include==>>inline or block or none;
Example
display:inline;

Short Program


<html>
<head>
<style>
li {
    display: inline;
}
</style>
</head>
<body>

<p>Display a list of links as a horizontal menu:</p>
<ul>
<li><a href="#" target="_blank">Item 1</a></li>
<li><a href="#" target="_blank">Item 2</a></li>
<li><a href="#" target="_blank">Item 3</a></li>
</ul>

</body> 
</html>

Visibility


Visiblity also used to hide or show the output or display of an element.
Syntax
visibility:value;
Value include==>>visible or hidden;
Example
visibility:hidden;


<html>
<head>
<style>
li {
    visibility:hidden;
}
</style>
</head>
<body>

<p>Display a list of links as a horizontal menu:</p>
<ul>
<li><a href="#" target="_blank">Item 1</a></li>
<li><a href="#" target="_blank">Item 2</a></li>
<li><a href="#" target="_blank">Item 3</a></li>
</ul>

</body> 
</html>
Note: In this program list item not shown in output unless you change the value of visibility from "hidden" to "visible".