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-

More Articles

 

Share your thought



PLEASE DISABLE ADBLOCKER AND SUPPORT US!

Please support us by enabling ads on this page. Refresh

YOU DON'T LIKE ADS, WE ALSO DON'T LIKE ADS!
 
But we have to show ads on our site to keep it free and updated. We have to pay huge server costs, domain costs, CDN Costs, Developer Costs, Electricity and Internet Bill. Your little contribution will encourage us to regularly update this site.