CSS Lists

CSS Lists are very useful in conveying a set of either numbered or bullet points. There are different CSS properties that can be used to control lists. Lists can be provided as ordered and unordered lists. In ordered lists, marking off the list items is with alphabet and numbers, and in unordered lists, the list items are marked using bullets.

CSS properties:

list-style-type
list-style-image
list-style-position
list-style
marker-offset

list-style-type:

Control the shape or style of bullet points/marker in the case of unordered lists and the style(CSS) of numbering characters in ordered lists.

Example:

<!DOCTYPE html> 
<html>
 <head>
 <title>CSS Lists</title>
   <style>
         .num{
          list-style-type:decimal;         
         }
         .alpha{
                 list-style-type:lower-alpha;
         }
         .roman{
                 list-style-type:lower-roman;
         }
         .circle{
          list-style-type:circle;
         }
         .square{
          list-style-type:square;
         }
         .disc{
          list-style-type:disc;
         }
   </style>
 </head>
 <body>
              <h2>
    Ordered Lists
  </h2>
  <ol class="num">
   <li>one</li>
   <li>two</li>
  </ol>
  <ol class="alpha">
   <li>one</li>
   <li>two</li>
 </ol>
          <ol class="roman">
   <li>one</li>
   <li>two</li>
 </ol>
 <h2>
 Unordered lists
 </h2>
  <ul class="disc">
   <li>one</li>
   <li>two</li> 
  </ul>
  <ul class="circle">
   <li>one</li>
   <li>two</li>
   </ul>
   <ul class="square">
    <li>one</li>
    <li>two</li>
   </ul>

  </body>
</html>

OUTPUT:

CSS Lists

list-style-position:

This property indicates whether the marker should appear inside or outside of the box.

Example:

<!DOCTYPE html> 
<html>
 <head>
 <title>CSS Lists</title>
   <style>
         .num{
          list-style-type:decimal;         
                 list-style-position:inside;
         }
         .roman{
          list-style-type:lower-roman;
          list-style-position:outside;
         }
         .circle{
          list-style-type:circle;
                 list-style-position:inside;
         }
         .square{
          list-style-type:square;
         }
         .disc{
          list-style-type:disc;
                 list-style-position:inside;
         }   
   </style> 
 </head>
 <body>
             <h2>
    Ordered Lists
  </h2>
  <ol class="num">
   <li>INSIDE</li>
   <li>two</li>
 </ol>
      <ol class="roman">
   <li>OUTSIDE</li>
   <li>two</li> 
 </ol>
 <h2>
     Unordered lists
   </h2>
   <ul class="disc">
    <li>INSIDE</li>
    <li>two</li>
   </ul>
   <ul class="circle">
    <li>INSIDE</li>
    <li>two</li>
   </ul>
        <ul class="square">
    <li>DEFAULT</li>
    <li>two</li>
   </ul>

 </body>
</html>

OUTPUT:

CSS Lists

list-style-image:

This property allows you to specify an image so that you can use your own bullet style.

Example:

<!DOCTYPE html> 
<html>
 <head>
 <title>CSS Lists</title>
   <style>
         .order{
          list-style-image: url(img.png);           
         }
         .unorder{
          list-style-image: url(img.png);           
         }

   </style>
 </head>
 <body>

          <h2>
    Ordered Lists
  </h2>
  <ol class="order">
   <li>one</li>
   <li>two</li>
  </ol>
  <h2>
   Unordered lists
 </h2>
 <ul class="unorder">
  <li>one</li>
  <li>two</li>
 </ul>

 </body>
</html>

OUTPUT:

CSS Lists

list-style:

The list-style provides to specify all the list properties into a single expression.

Example:

<!DOCTYPE html> 
<html>
 <head>
 <title>CSS Lists</title>
   <style>
         .order{
          list-style: lower-alpha inside url(img.png);               
         }
         .unorder{
          list-style: disc outside;            
         }

   </style>
 </head>
 <body>
             <h2>
    Ordered Lists
  </h2>
  <ol class="order">
   <li>one</li>
   <li>two</li>
 </ol>
 <h2>
  Unordered lists
</h2>
<ul class="unorder">
 <li>one</li>
 <li>two</li>
</ul>

 </body>
</html>

OUTPUT:

CSS Lists

Styling Lists with colors:

This lists more attractive and interesting, we can style lists with colors.

Example:

<!DOCTYPE html> 
<html>
 <head>
 <title>CSS Lists</title>
   <style>
         .order{
          list-style: upper-alpha;
          background: pink;
          padding:20px;
         }
         .order li{
          background: lightblue;
          padding:10px;
          font-size:20px;
          margin:10px;
         }
         .unorder{
          list-style: square inside;     
          background: cyan;
          padding:20px;
         }
         .unorder li{
          background: green;
          color:white;
          padding:10px;
          font-size:20px;
          margin:10px;
         }

   </style>
 </head>
 <body>
             <h2>
    Ordered Lists
  </h2>
  <ol class="order">
   <li>ONE</li>
   <li>TWO</li> 
 </ol>
 <h2>
   Unordered lists
 </h2>
 <ul class="unorder">
  <li>ONE</li>
  <li>TWO</li>
 </ul>

 </body>
</html>

OUTPUT:

CSS Lists