CSS Display Property

In this chapter you will learn:
What is display property?
Values of display property.
Examples of display property
Display property is also important property like other properties of CSS because it is used to specify that how an element can display on the web page. The element or its content may be inline, outline etc.

Syntax:-
Selector{ display:value;}
Examples of display property:-
Example 1. display:inline;
<html>
<head>
<style type="text/css">
div
{
display:inline;
}
</style>
</head>
<body>
<div>This is the example of display:inline.</div>
<div>This is the example of display:inline.</div>
<div>This is the example of display:inline.</div>
<div>This is the example of display:inline.</div>
</body>
</html>

Output:-
example of display:inline
Example 2. display:outline;
<html>
<head>
<style type="text/css">
div
{
display:outline;
}
</style>
</head>
<body>
<div>This is the example of display:outline.</div>
<div>This is the example of display:outline.</div>
<div>This is the example of display:outline.</div>
<div>This is the example of display:outline.</div>
</body>
</html>

Output:-
example of display:outline
Example 3. display:none;
<html>
<head>
<style type="text/css">
#a
{
display:none;
}
</style>
</head>
<body>
<div>1.This is the example of display:none.</div>
<div id="a">2.This is the example of display:none.</div>
<div>3.This is the example of display:none.</div>
</body>
</html>

Guide:-
In the given program of example 3, display value none has applied for the div whose id is "a" so the second div is hidden.
Output:-
example of display:none

Summary

In this chapter you have learned about display property so now you can use it in your program. Follow the given example of this property and try to write another program. Click on Next button to continue-

 

Share your thought