Styling list items with CSS

• Positioning a bullet point
• Changing a bullet point
• Substituting the bullet with an image
• Giving a list item a background image
• Specifying multiple properties in one go

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 is used to position bullet points either inside or outside the list. You can place list-style-position on either the li or the ul — both accomplish the same thing. If no list-style-position is specified, the bullet point defaults to sitting outside the list.

Something to note is that, 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:

• Public
• Protected
• Private

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

CSS Code:

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

Result:

• Public
• Protected
• Private

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:

• Public
• Protected
• Private

For more on the list-style-position property, visit the W3C's CSS 2.1 page on the list-style-position property.

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:

• clone()
• finalize()
• toString()

For more on the list-style-type property, visit the W3C's CSS 2.1 page on the list-style-type property.

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. This is done via the list-style-image property.

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:

• Abstract
• Interface
• Implementation

For more on the list-style-image property, visit the W3C's CSS 2.1 page on the list-style-image property.

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:

• Method signature
• Parameter
• Return type

For more information on backgrounds in CSS, visit my tutorial CSS 101 | Part Ten - Backgrounds in CSS .

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-type, list-style-position and list-style-image.

Example of using shorthand to style lists

CSS Code:

        #shorthandEx {
        	list-style:inside 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:

• mysql_fetch_array()
• implode()
• array_push()

For more on the shorthand list-style property, visit the W3C's CSS 2.1 page on the list-style property.