CSS Tutorial - CSS Lists








There are three types of lists in HTML.

  • Ordered List
  • Unordered List
  • Definition List

With CSS we can style them in different ways.

List Marker

You use the list-style-type property to set the style of marker for a list.

The allowed values for this property is listed as follows.

  • none - No marker will be shown.
  • box
    check
    circle
    diamond
    disc
    dash square - Use the specified shape as the marker. Note that not all browsers support all shapes.
  • decimal - Use decimal numbers for the markers.
  • binary - Use binary numbers for the markers.
  • lower-alpha - Use lowercase alpha characters for the markers.
  • upper-alpha - Use uppercase alpha characters for the markers.

The following shows the list-style-type property in use. 

<!--from w w  w . j  a  v a  2 s .c  o  m-->
<html>
<head>
<style rel="stylesheet" type="text/css">
li.a {
    list-style-type: none;
}

li.b {
    list-style-type: disc;
}

li.c {
    list-style-type: circle;
}

li.d {
    list-style-type: square;
}

li.e {
    list-style-type: decimal;
}

li.f {
    list-style-type: lower-alpha;
}

li.g {
    list-style-type: upper-alpha;
}

li.h {
    list-style-type: lower-roman;
}

li.i {
    list-style-type: upper-roman;
}
</style>
</head>

<body>
    <ul>
        <li class="a">Point one</li>
        <li class="b">Point two</li>
        <li class="c">Point three</li>
        <li class="d">Point four</li>
        <li class="e">Point five</li>
        <li class="f">Point six</li>
        <li class="g">Point seven</li>
        <li class="h">Point eight</li>
        <li class="i">Point nine</li>
    </ul>
</body>
</html>

Click to view the demo

You can apply this property to entire lists or individual list items.





list-style-image

You can use an image as the marker through the list-style-image property.

The following code uses an Image As a List Marker. 

<!DOCTYPE HTML>
<html>
<head>
<style>
ul  {<!--from   ww  w. j av  a2s . c o  m-->
   list-style-image:  url('http://www.java2s.com/style/download.png');
}
</style>
</head>
<body>
    <ul>
        <li>XML</li>
        <li>CSS</li>
        <li>Javascript</li>
        <li>Java</li>
        <li>SQL</li>
        <li>HTML</li>
    </ul>
</body>
</html>

Click to view the demo





list-style-position

You can specify the position of the marker in relation to the li element's content box using the list-style-position property.

The allowed values are inside (the marker is inside the content box) and outside (the marker is outside the content box).

The following code shows the list-style-position property and its values in use. 

<!DOCTYPE HTML>
<html>
<head>
<style>
li.inside {<!--   w  w  w.  j av  a2  s. c om-->
    list-style-position: inside;
}
li.outside {
    list-style-position:  outside;
}
li {
    background-color: lightgray;
}
</style>
</head>
<body>
    <ul>
        These  are   the   inside items:
        <li class="inside">A</li>
        <li class="inside">B</li>
        <li class="inside">C</li>
        These  are   the   outside items:
        <li class="outside">D</li>
        <li class="outside">E</li>
        <li class="outside">F</li>
    </ul>
</body>
</html>

Click to view the demo

Shorthand property

list-style is the shorthand property to set all list characteristics.

The format for the list-style shorthand property is as follows: 

list-style: <list-style-type>  <list-style-position>  <list-style-image>

The following code shows how to use shorthand list style property.

<html>
<head>
<style type='text/css'>
li {<!--from  w w w .j  a v  a  2s  . c  o m-->
    background: mistyrose;
}
li#arrow {
    list-style: square url('arrow.png') outside;
}
li#arrow-inside {
    list-style: url('arrow.png') inside;
}
li#marker-inside {
    list-style: square inside;
}
li#marker-image {
    list-style: square url('arrow.png');
}
li#arrow-only {
    list-style: url('arrow.png');
}
li#marker {
    list-style: circle;
}
li#position {
    list-style: inside;
}
</style>


</head>
<body>
    <ul>
        <li id='arrow'>All three styles can be provided.</li>
        <li id='arrow-inside'>The image and the position.</li>
        <li id='marker-inside'>The marker and the position.</li>
        <li id='marker-image'>The marker and the image.</li>
        <li id='arrow-only'>Just the image.</li>
        <li id='marker'>Just the marker.</li>
        <li id='position'>Just the position.</li>
    </ul>
</body>
</html>

Click to view the demo

Property Description CSS
line-height Sets the line height1
list-style-image Set an image as the list-item marker1
list-style-position Set list-item markers to be inside or outside1
list-style-type Set the type of list-item marker1
list-style Sets list properties in one declaration1