ankitweblogic logo
W e b t u t o r i a l s

Define CSS

CSS Comment

CSS Selectors

Types of CSS

CSS Color Property

CSS Font Property

CSS Background

CSS Box Model

CSS3 Border Radius

Styling HTML Table

Styling Links

CSS Menu

CSS Display and Visibility

CSS Overflow Property

CSS Position, Z-index

CSS Outline, Offset

CSS Cursor Property

CSS3 box-sizing

CSS Web Layout

CSS Website

Google Fonts

Google Map

Login Form

Google Page

Facebook Page

CSS Assignment List

CSS Visibility Property

Visibility: The visibility property specifies if an element should be visible or hidden.
Even after creating visibility hidden, element take space on the page.

Example: Output: Exercise: Hover the cursor on child div to make parent div visible.

CSS Display Property

The CSS display property specifies how an HTML element will be display. Normally, Display property has 3 values:

display:none;
display:block;
display:inline;

Display none is use to hide the HTML element, the hidden element will not leave the blank, empty area on the browser.
Example: Hide the HTML Element using display:none.

<html>
   <style>
      .hide{
         display:none;
      }
   </style>
   <body>
      <h1>This is Visible Heading</h1>
      <h1 class="hide">This is InVisible Heading</h1> 
      <h1>This is Visible Heading</h1>    
   </body>
</html>
Output:

Display block: A block element is an element that takes up the full width available, and has a line break before and after it.

Example: Diplay Block.
<html>
   <style>
      span {
         display:block;
      }
   </style>
   <body>
      <span>Display property with a value of "block" results in</span>
      <span>a line break between the two elements.</span>
   <body>
</html>
Output:

Display inline: An inline element only takes up as much width as necessary, and does not force line breaks.

Example: Diplay inline.
<html>
   <head>
      <style type="text/css">
        li {
           	display: inline;
        }
      </style>
    </head>
    <body>
     <p>Display a list of links as a horizontal menu:</p>
      <ul>
       <li><a href="#" target="_blank">HTML</a></li>
       <li><a href="#" target="_blank">CSS</a></li>
       <li><a href="#" target="_blank">JavaScript</a></li>
      </ul>
    </body>
</html>
Output: