Tutorials Point


  CSS Home

  CSS Reference
  Pseudo Classes & Elements

Copyright © 2014 by tutorialspoint



  Home     References     Discussion Forums     About TP  

CSS - list-style


previous next AddThis Social Bookmark Button


Advertisements

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:

<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>

This will produce following result:

  • Maths
  • Social Science
  • Physics
  • Maths
  • Social Science
  • Physics
  1. Maths
  2. Social Science
  3. Physics
  1. Maths
  2. Social Science
  3. Physics
  1. Maths
  2. Social Science
  3. Physics

To Become more comfortable - Do Online Practice



previous next Printer Friendly

Advertisements


  

Advertisements