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:

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 »


Liked this post? Share it!