saftutorials.com
CSS Display Tutorial

CSS Display is most important property of CSS for a website layout structure. A div/p/h1-h6 or others HTML Tag is show or hide it depend it CSS Display. By default CSS Display property type is : none. 

By this tutorials you can learn

1) How to use CSS Display?

2) Kinds of CSS Display Property type?

How to use CSS Display?

CSS Display use in a style code area -  like:  display: none


Kinds of CSS Display Property type

1) display : none; 2) display : block; 3) display : inline, 4) display : inline-block, 5) display : list-item, 6) display : table; 

1) Display None: Display none means hidden a div/p or any HTML tag. Its alternative use of visibility: hidden; 

CSS Dispaly with NONE Property Type
<!DOCTYPE html>
<html>
<head>
  <title>CSS Dispaly with NONE Property Type</title>
  <style type="text/css">
    .div1
    {
      width: 50%;
      height: 150px;
      background: #333;
      border:1px solid red;
      color:#fff;
      float: left;
      display: none;
    }
  </style>
</head>
<body>
<div class="div1">
  Div using by widht and height px
</div>
</body>
</html>

There are no Output for display none property type.

2) Display Block : Display block display a div as block. Heading and paragraph tag default display block.

CSS Dispaly with BLOCK Property Type
<!DOCTYPE html>
<html>
<head>
  <title>CSS Dispaly with BLOCK Property Type</title>
  <style type="text/css">
  .maindiv
  {
    width: 50%;
    height: 250px;
    background: #eee;
    border:1px solid red;
    float: left;
  }
  .seconddiv
  {

    min-height: 30px;
    display: block;
    border:1px solid green;
    float: left;
    margin: 8px;
          padding: 5px;
  }
  </style>
</head>
<body>
<div class="maindiv">
<p align="center">Result for display block</p>
  <div class="seconddiv">
    Display Block
  </div>
        <div class="seconddiv">
    Display Block
  </div>
</div>
</body>
</html>


 

Result for display block

Display Block
Display Block










3) Display Inline : Display inline display a div as inline. Inline means if you use this property the result display is same line that means TEXT OR DIV then show INLINE DIV

CSS Dispaly with INLINE Property Type
<!DOCTYPE html>
<html>
<head>
  <title>CSS Dispaly with INLINE Property Type</title>
  <style type="text/css">
  .maindiv2
  {
    width: 50%;
    height: 250px;
    background: #eee;
    border:1px solid red;
    float: left;
  }
  .seconddiv2
  {

    min-height: 30px;
    display: inline;
    border:1px solid green;
    float: left;
    margin: 8px;
          padding: 5px;
  }
  </style>
</head>
<body>
<div class="maindiv2">
<p align="center">Result for display inline</p>
  <div class="seconddiv2">
    Display Inline
  </div>
        <div class="seconddiv2">
    Display Inline
  </div>
</div>
</body>
</html>


 

Result for display inline

Display Block
Display Inline
Display Inline










4) Display Table : Display table display a div as table. Nested elements should be displayed as table-row and table-cell.

CSS Dispaly with TABLE Property Type
<!DOCTYPE html>
<html>
<head>
  <title>CSS Dispaly with TABLE Property Type</title>
  <style type="text/css">
  .maindiv3
  {
    width: 50%;
    height: 250px;
    background: #eee;
    border:1px solid red;
    float: left;
  }
  .seconddiv3
  {

    min-height: 30px;
    display: table;
    border:1px solid green;
    float: left;
    margin: 8px;
      padding: 5px;
  }
  </style>
</head>
<body>
<div class="maindiv3">
<p align="center">Result for display table</p>
  <div class="seconddiv3">
    Display Table
  </div>
        <div class="seconddiv3">
    Display Table
  </div>
</div>
</body>
</html>


 

Result for display table

Display Block
Display Table
Display Inline
Display Table










4) Display List Item : Display list-item display a div as list-item. Nested elements should be displayed as list-item-row and list-item-cell.

CSS Dispaly with LIST ITEM Property Type
<!DOCTYPE html>
<html>
<head>
  <title>CSS Dispaly with LIST ITEM Property Type</title>
  <style type="text/css">
  .maindiv4
  {
    width: 50%;
    height: 250px;
    background: #eee;
    border:1px solid red;
    float: left;
  }
  .seconddiv4
  {
    min-height: 30px;
    display: list-item;
    border:1px solid green;
    float: left;
    margin: 8px;
      padding: 5px;
  }
  </style>
</head>
<body>
<div class="maindiv4">
<p align="center">Result for display list-item</p>
  <div class="seconddiv4">
    Display List Item
  </div>
        <div class="seconddiv4">
    Display List Item
  </div>
</div>
</body>
</html>


 

Result for display list-item

Display List Item
Display List Item

Find us on

Facebook Google Plus Twitter Pinterest YouTube

web statistic