CSS Introduction | Basic CSS Properties | CSS Lists

With CSS, you can apply various effects to lists.

The list-style properties available in CSS are as follows.

1. list-style-type
2. list-style-image
3. list-style-position

list-style-type Property

The numbers or symbols placed before list elements are called markers. With the list-style-type property, you can apply various markers to a list.

<style>
    .circle { list-style-type: circle; }
    .square { list-style-type: square; }
    .upperAlpha { list-style-type: upper-alpha; }
    .lowerRoman { list-style-type: lower-roman; }
</style>

More details about available markers can be found in the HTML list lesson.

list-style-image Property

With the list-style-image property, you can use your own image as a marker.

<style>
    .imageMarker { list-style-image: url("/examples/images/img_list_marker.png"); }
</style>

list-style-position Property

With the list-style-position property, you can set the position of list elements. The default value of the list-style-position property is outside.

<style>
    .outside { list-style-position: outside; }
    .inside { list-style-position: inside; }
</style>

Applying list-style Properties at Once

You can set styles that use all the list-style properties mentioned above in one line.

<style>
    ul { list-style: square inside url("/examples/images/img_list_marker.png"); }
</style>

Applying Background Colors to Lists

With CSS, you can set background colors for the entire list as well as for each list element.

<style>
    ul { background: #D2691E; padding: 15px; }
    ol { background: #6495ED; padding: 15px; }
    ul li { background: #DEB887; margin: 5px; }
    ol li { background: #00FFFF; margin-left: 15px; }
</style>

CSS list-style Properties