Styling list items with CSS

Published on July 19th 2008.

Modified on July 30th 2010.

Whether you want to give your lists a bit of a kick, or dramatically alter their appearance, this tutorial will show you what to do.

Positioning a bullet point

The list-style-position property enables you to position your bullet point inside or outside your list and can either be placed on the li or the ul. The default position for a bullet point, if no list-style-position is applied, is outside.

Note — if you place a background on your ul the bullet point will look as if it's inside the your list, even if list-style-position is set to outside. To rectify this, you must apply your background styles to your li.

Position a bullet point outside of a list

CSS Code:

        #outsideBulletExOne li {
        	list-style-position:outside;
            background-color:#39C;
        }

(X)HTML Code:

        <ul id="outsideBulletExOne">
        	<li>Public</li>
        	<li>Protected</li>
        	<li>Private</li>
        </ul>

Result:

Example with list-style-position on ul instead of li

CSS Code:

        #outsideBulletExTwo {
        	list-style-position:inside;
            background-color:#39C;
        }

Result:

As you can see, even though the list-style-position is set to outside, the bullet-points are showing inside the ul because the list-style-position and background-color are both on the ul.

Position a bullet point inside a list

CSS Code:

        #insideBullet li {
        	list-style-position:inside;
            background-color:#39C;
        }

(X)HTML Code:

        <ul id="insideBullet">
        	<li>Public</li>
        	<li>Protected</li>
        	<li>Private</li>
        </ul>

Result:

Changing the style of a bullet point

The default bullet point is a disc (a black dot). To change this we use the list-style-type property.

Example of changing the style of a bullet point

Here we will change the style of a bullet point to a square.

CSS Code:

        #bulletSquare li {
        	list-style-type:square;		
        }

(X)HTML Code:

        <ul id="bulletSquare">
        	<li>clone()</li>
        	<li>finalize()</li>
        	<li>toString()</li>
        </ul>

Result:

Substituting a bullet point with an image

I've seen a fair few threads where people have asked how to swap the generic bullet point of an HTML list with an image. Here's how it's done.

Example of changing a bulletpoint to an image

CSS Code:

        #bulletImg li {
        	list-style-image:url(../images/bullet_img_test.jpg);	
        }

(X)HTML Code:

        <ul id="bulletImg">
        	<li>Abstract</li>
        	<li>Interface</li>
        	<li>Implementation</li>
        </ul>

Result:

If you want to move your image around, or want more control over it, then it might be preferable to use a background image instead.

Giving a list item a background image

list-style-image is fine if you just want to swap the default bullet with an image, but if you want more flexibility over you image, say, you want to shift it around a bit, or tile it, you'll find that you cannot do this by just swapping the bullet for an image. This is where the background-image property comes in — it's easier to manipulate a background image.

Example of a background image on a list item

CSS Code:

        #bgImageList li {
        	background:url(../images/bullet_red.jpg) no-repeat -1px 1px;
        	list-style-type:none;	
        	text-indent:15px;
        }
        
        #bgImageList li span {
        	border-bottom:1px solid red;
        	padding-left:7px;
        }

(X)HTML Code:

        <ul id="bgImageList">
        	<li><span>Method signature</span></li>
        	<li><span>Parameter</span></li>
        	<li><span>Return type</span></li>
        </ul>

The span tags aren't necessary. I used them for formatting purposes, so I could place a border underneath the text only and not the background image.

Result:

Specifying multiple properties in one go

Adding multiple properties to lists is made easy by the CSS shorthand property list-style, which takes a list-style-position, list-style-type, and a background image.

Example of using shorthand to style lists

CSS Code:

        #shorthandEx {
        	list-style:inside disc url(../images/sh-list.png);
        	background-color:#669;
        	margin:0;
        	padding:0;
        	color:#ccc;	
        }

(X)HTML Code:

        <ul id="shorthandEx">
        	<li>mysql_fetch_array()</li>
            <li>implode()</li>
            <li>array_push()</li>
        </ul>

Result:

Got any questions or comments? Feel free to mail me @ helen@alternategateways.com.

Share this:

Back to resources.