CSS list-style

The CSS list-style property is used to style and/or position the marker of list items. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      ul{list-style: upper-roman inside;}
   </style>
</head>
<body>

   <ul>
      <li>CSS</li>
      <li>HTML</li>
      <li>JS</li>
   </ul>
   
</body>
</html>

Output

CSS
HTML
JS

CSS list-style Syntax

The syntax of list-style property in CSS, is:

list-style: list-style-type list-style-position list-style-image;

Therefore, the list-style property can also be used as shorthand for following properties:

list-style-type - used to define the type to list marker
list-style-position - used to define the position of list marker
list-style-image - used to define/set image as the marker of list items

The initial and inherit keyword can also be used to define the list-style property. The initial is used to use the default value, whereas the inherit is used to use the value inherited by the parent element.

CSS list-style Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      ul.a{list-style: square;}
      ul.b{list-style: square inside;}
      ul.c{list-style: outside url("images/fingerToRight.JPG");}
   </style>
</head>
<body>

   <h2>list-style: square</h2>
   <ul class="a">
      <li>CSS</li>
      <li>HTML</li>
      <li>JS</li>
   </ul>

   <h2>list-style: square inside</h2>
   <ul class="b">
      <li>CSS</li>
      <li>HTML</li>
      <li>JS</li>
   </ul>

   <h2>list-style: outside url("images/fingerToRight.JPG")</h2>
   <ul class="c">
      <li>CSS</li>
      <li>HTML</li>
      <li>JS</li>
   </ul>
   
</body>
</html>

Output

list-style: square

CSS
HTML
JS

list-style: square inside

CSS
HTML
JS

list-style: outside url("images/fingerToRight.JPG")

CSS
HTML
JS

CSS Online Test

« Previous Tutorial Next Tutorial »