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>