How to use Display property using CSS

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>

One thought on “How to use Display property using CSS

Leave a Reply

Your email address will not be published. Required fields are marked *