Skip to main content

Styling list items with CSS

Submitted by helen on Saturday, July 19, 2008 - 21:07; Modified on Thursday, August 18, 2016 - 11:07

This tutorial will show you how to style your lists with CSS. We will cover simple positioning, changing the bullet point style and using an image as a bullet point.

Positioning a bullet point

The list-style-position property is used to position bullet points either inside or outside a 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 is inside the list, even if list-style-position is set to outside. To rectify this, you must apply your background styles to your lis.

Position a bullet point outside of a list

To position a bullet point outside a list, set list-style-position to outside, either on your ul or your li. In the example below, we will apply a list-style-position to our lis.

CSS Code:


#outsideBulletExOne li {
    list-style-position:outside;
    background-color:#6DBAE0;
}

(X)HTML Code:


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

Result:

  • Public
  • Protected
  • Private

I have placed a background colour on our list so you can more easily see the bullet point position. It is worth noting that, should you instead apply your background colour to your ul, the bullet points will appear inside the background coloured region, as seen below:

CSS Code:


#outsideBulletExTwo {   
    background-color:#6DBAE0;
}

#outsideBulletExTwo li {
    list-style-position:outside;    
}

(X)HTML Code:


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

Result:

  • Public
  • Protected
  • Private

For consistency's sake, so as to match the first example, I have created two rules above — one to apply a background colour to the list and another to set the bullet point position. I could just as easily have written the following, and it would have produced the same result:


#outsideBulletExTwo {   
    background-color:#6DBAE0;
    list-style-position:outside;  
}

Position a bullet point inside a list

To position a bullet point inside a list, set list-style-position to inside, either on your ul or your li. In the example below, we will apply a list-style-position to our lis, and also use a background colour for demonstration purposes, as we have above.

CSS Code:

        
#insideBulletExOne li {
    list-style-position:inside;
    background-color:#6DBAE0;
}

(X)HTML Code:


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

Result:

  • Public
  • Protected
  • Private

As with the outside bullet position, if we were to place a background colour instead on our ul, the bullet points would appear to be inside the background coloured region, as seen below:

  
#insideBulletExTwo  {  
    background-color:#6DBAE0;
}
      
#insideBulletExTwo li {
    list-style-position:inside;   
}

(X)HTML Code:


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

Result:

  • Public
  • Protected
  • Private

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.

Using the list-style-type property

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()

Substituting a bullet point with an image

I've seen a few threads where people have asked how to swap the generic bullet point of an HTML list with an image. This is commonly done via the list-style-image property.

Using list-style-type property

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

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 with the list properties alone. This is where it becomes easier to use the background property instead, because it offers more flexibility over image placement.

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>

Note — 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 A Beginner's Guide to CSS | Part Ten - Backgrounds with 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.

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()