In this article, you will learn How to use Display property using CSS. The Display property specifies how the element will be displayed.
Display: none;
The <script> element uses display:none; as default.
Example:-
<html>
<head>
<title>Display none Property</title>
<style>
h1.hide {
display: none;
}
</style>
</head>
<body>
<h1>This is the visible heading</h1>
<h1 class="hide">This is the hidden heading</h1>
</body>
</html>
Display:inline;
The example is creating inline <li> elements for horizontal menus:
Example:-
<html>
<head>
<title>Display inline Property</title>
<style>
li {
display: inline;
}
</style>
</head>
<body>
<p>Display inline Property:</p>
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" >About</a></li>
<li><a href="#" >COntact Us</a></li>
</ul>
</body>
</html>
Display:block;
The example displays <span> and <a> elements as block property.
Example:-
<html>
<head>
<title>Display Block Property</title>
<style>
a {
display: block;
}
span {
display: block;
}
</style>
</head>
<body>
<p>Display block Property:</p>
<span>Welcome to Hub of Tutorials</span> <span>Download Free projects</span><br>
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" >About</a></li>
<li><a href="#" >COntact Us</a></li>
</ul>
</body>
</html>