CSS - Display


CSS - Display

  • In CSS, display property specifies how an element should be displayed in the browser window.
  • All the element in html, has a default display value based on its type. The default elements display will be usually be none, block or inline.

Display None:

  • Hiding an element can be done by setting the display property to none.

Sample Code:

<!DOCTYPE html>
<html>
	<head>
              <style>
  		   h1 {
      		   display: none;
       	      }
            </style>
 	</head>
 	<body>
            <h1>Wikitechy</h1>
            <p>H1 Heading Is hidden</p>
 	</body> 
</html>

Code Explanation :


    Here , we Open the style tag(<style></style>) to apply CSS styles for the element.

    In CSS, display: none property for an h1 element will hide the h1 element from being displayed in the browser window.

    <h1>Wikitechy</h1> Here we have specified <h1> tag for the term “Wikitechy”, which will not be displayed in the output.

    The Paragraph text “H1 Heading Is hidden” will only be displayed in the browser window.

Output:


    The Paragraph text “H1 Heading Is Hidden” will only be displayed in the web browser. Whereas , H1 tag Element “Wikitechy” is hidden from the browser window.