Styling list items with CSS

Here, I'll show you how to style-up your list items.

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.

Outside the list

CSS Code

        li {
        list-style-position:outside;
        }
        

Result

item 1
item 2
item 3

Inside the list

CSS Code

        li {
        list-style-position:inside;
        }
        

Result

item 1
item 2
item 3

Changing a bullet point

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

CSS Code

        li {
        list-style-type:circle;
        }
        

CSS Short-hand Code

        li {
        list-style:circle;
        }
        

This works just the same as above, though I, personally, tend to use short-hand only if there's more than one property I intend to change - for example, list-style-type and list-style-position. If I'm just changing the bullet point, I would normally use list-style-type...but it's up to you whichever you use.

Result

This changes our bullet point to a circle, as demonstrated:

item 1
item 2
item 3

Substituting a bullet with an image

I've seen a fair few threads about swapping the generic bullet point of an HTML list with an image, so here is how it's done...

CSS Code

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

Where images/bullet_img_test.jpg is whatever image you want to use as a bullet.

Result

item 1
item 2
item 3

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, so let's see an example...

CSS Code

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

HTML Code

        <ul>
        <li><span>item 1</span></li>
        <li><span>item 2</span></li>
        <li><span>item 3</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

item 1
item 2
item 3

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

Back to resources.