CSS - list-style

Advertisements

Previous Page
Next Page  

Description

The list-style property is a shorthand property used to set the position and type of markers in a list; it can also be used to assign an image as the marker.

Possible Values

  • <list-style-type> − Any permitted value for the property list-style-type.

  • <list-style-position> − Any permitted value for the property list-style-position.

  • <list-style-image> − Any permitted value for the property list-style-image.

Applies to

All the elements with a display of list-item.

DOM Syntax

object.style.listStyle = "decimal;"

Example

Here is the example −

Live Demo 
<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style-type:circle;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ul style = "list-style-type:square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style-type:decimal;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-roman;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

This will produce following result −

Advertisements