Using CSS to Alter the Style of Your Bullet Pointed HTML Lists

Last updated on by cjh

Using CSS to alter the style of your bullet pointed HTML lists

As a web site owner, sometimes, you’ll want to make a list. That’s pretty much all you want, a nice little list of something useful for your users to see and take note of.

Perhaps it’s a list of:

Making a list might not sound like the most exciting aspect of your web site, and you’re probably not alone in thinking that, but the information you provide might be important, and there is no need for your list to be a bog-standard-word-like bullet pointed list if you don’t want it to be.

HTML provides a way to define your lists, and with CSS (Cascading Style Sheets), you can style your lists in a number of different ways, from a slight change in the bullet point used, to the more desirable customised image that fits in more so with your overall site design. Some of the changes can be done directly within the HTML of the list, but these won’t be covered, as this is a CSS related article. This article also assumes a basic understanding of HTML and CSS, and how CSS properties are set on a web page.

Ordered and unordered lists.

There are two types of HTML list elements that are designed for bullet point style lists, an ordered list (<ol>) and an unordered list (<ul>). In both cases, the list item element (<li>) is used to define each item in the list.

You’ll know doubt already know the difference, but just to refresh, you might use an ordered list for giving instructions or directions, where each item needs to be followed in order, while an unordered list would be handy for a shopping list, where no particular place of order is required …. well, until the cooking stage of course!

Ordered lists using the HTML element <ol>

To markup an ordered list of driving instructions using HTML might look like:

<ol id="directions">
<li>Drive 1.1 miles!</li>
<li>Turn left!</li>
<li>Drive 2.4 miles!</li>
<li>Take the third exit at the roundabout!</li>
<li>No the THIRD exit, not the second, go back and try again!</li>
</ol>

In most browsers, the default visual appearance of an ordered list that is defined with the <ol> element is the use of numeric values as the marker, known as a “decimal” which, naturally, start from 1.

Unordered lists using the HTML element <ul>

To markup an unordered list for features your web site / service offers using HTML might look like:

<ul id="whatweoffer">
<li>Unbeatable Price</li>
<li>Same-day despatch</li>
<li>Free delivery</li>
<li>No quibble returns</li>
<li>Free Hat</li>
</ul>

In most browsers, the default visual appearance of an unordered list that is defined with the <ul> element is the use of a rounded filled-in disc-like bullet point as the marker, known as a “disc”, such as you’d see in any standard office document.

The CSS “list-style-type” property

Both ordered and unordered lists can have the marker altered using the CSS property “list-style-type”, which defines the type of list style that is used. Web browsers include some alternative visuals, which you can select by changing the value of the “list-style-type” property.

The CSS “list-style-type” property with unordered lists

The default “list-style-type” property value for an unordered list is “disc”, which if written out would be set like this:

<style type="text/css">
ul#whatweoffer {
list-style-type: disc;
}
</style>

However, as it is the default, you don’t need to add the above if you wish to use a disc bullet point.

You can change this value to either “circle” or “square”. The “square” value will give you a bullet point that is square and filled in, while the “circle” value will give you a bullet point that is a circle that isn’t filled in.

<style type="text/css">
ul#whatweoffer {
list-style-type: circle;
}
</style>

<style type="text/css">
ul#whatweoffer {
list-style-type: square;
}
</style>

Using either the "disc" (default), “circle” or “square” values would result in the following type of list display in a typical web browser:

HTML lists example

The CSS “list-style-type” property with ordered lists

The default “list-style-type” property value for an ordered list is “decimal”, which if written out would be set like this:

<style type="text/css">
ol#directions {
list-style-type: decimal;
}
</style>

This will provide an automatic numeric marker for each list item, starting from “1”, and counting up for as many list items as needed. Again, however, as it is the default for ordered lists, you don’t need to add the above if you wish to use a decimal marker.

Ordered lists have a larger selection of markers built-in to browsers, which can include “lower-roman”, “upper-roman” (Roman numerals), and “upper-alpha”, “lower-alpha” (alphabet). There is also the value “decimal-leading-zero”, that adds a zero before the numbers 1 though 9, but this isn’t supported in older versions of Internet Explorer.

A couple of examples of changing an ordered lists style are shown below:

<style type="text/css">
ol#directions {
list-style-type: upper-roman;
}
</style>

<style type="text/css">
ol#directions {
list-style-type: lower-alpha;
}
</style>

Using either the "decimal" (default), “upper-roman” or “lower-alpha” values would result in the following type of list display in a typical web browser:

HTML lists example

Removing the marker from your list completely

If you don’t want any marker at all, you can set the “list-style-type” property to read “none” for either ordered and unordered lists, and this will not display any type of marker before each item in the list:

<style type="text/css">
ol, ul {
list-style-type: none;
}
</style>

The CSS “list-style-image” property

A popular feature is the ability to define your own custom images as your list marker. You can create any image you wish, of any size, in any standard image format that browsers support, although the logical road to take is using a small image that looks like it’s part of a list.

You can use a custom image for both ordered and unordered lists, though you should note that by doing so for an ordered list, you lose the ability to define a marked out order.

Once you have created / selected your chosen image, you simply need to set the URL of the “list-style-image” property in CSS, for example:

<style type="text/css">
ul#recycle {
list-style-type: square;
list-style-image: url(recycle-icon.png);
}
</style>

The above example will set the markers to use the optimised image “recycle-icon.png” in place of a standard marker. The marker is set to use a “square” if for any reason the image can’t be loaded. Setting a “list-style-type” option isn’t necessary, though you may find you have a preferred alternative in mind if the custom image doesn’t load. Below is an example of a list of widely recycled items using a custom image as a marker:

HTML lists example

Changing the marker when the user moves the mouse over a list item

Another visual feature you might want to include is having the marker for a particular list entry change when the user moves the mouse over one of the items in your list. This can be done using the CSS pseudo-class “:hover”, and applying it to the <li> element within your CSS code. For example, if you wanted a “circle” marker to change to a filled in “disc” marker when the mouse moved over a list item, you could use the code:

<style type="text/css">
ul { list-style-type: circle; }
ul li:hover { list-style-type: disc; }
</style>

Each time the mouse moves over one of the list entries, the browser is told to change the marker from a “circle” to a “disc”. The marker will change back to a “circle” once the mouse is moved away from the list element.

This can also be used when using a custom image as a marker, for example:

<style type="text/css">
ul { list-style-image: url(custom-image.png); }
ul li:hover { list-style-image: url(custom-image-hover.png); }
</style>

When using an image however, it is best to ensure both the original image and the “hover” image share the same dimensions.

The CSS list-style-position property

By default, the position of each list marker is placed outside of the <li> elements space, which is often what you’ll want when making your list, as it adds a little space between the marker and the text, without pushing the list too far into the page.

However, if you would like the marker to be placed inside the <li> elements space, you can set the “list-style-position” property to “inside”, for example:

<style type="text/css">
ul {
list-style-type: square;
list-style-image: url(recycle-icon.png);
list-style-position: inside;
}
</style>

Here is an example of how a list will look when chancing the "list-style-position". The first list is using the default "outside" setting, while the second is using the "inside" setting. Each list item in this example has a border around it to show that the list item element (<li>) is kept in the same place within the web page:

HTML lists example

Different markers for each list entry

If you desire to have a different marker for each entry in a list, you can add an “id” or “class” attribute to each <li> HTML element, so that you can reference it in your CSS code. For example, you could define an unordered list in HTML like so:

<ul id="shoppinglist">
<li id="eggs">Eggs</li>
<li id="bread">Bread</li>
<li id="milk">Milk</li>
</ul>

… and apply a different custom image marker for each list entry within the CSS:

<style type="text/css">
ul#shoppinglist { list-style-type: square; }
ul li#eggs { list-style-image: url(egg.png); }
ul li#bread { list-style-image: url(bread.png); }
ul li#milk { list-style-image: url(milk.png); }
</style>

The general CSS list-style shorthand property

Up to now you’ve seen each individual property for changing the way an ordered and unordered HTML list looks, but you can define all those properties at once with the short list-style property, which allows you to set the value of “list-style-type”, “list-style-position” and “list-style-image”, in that particular order, such as:

<style type="text/css">
ul#shoppinglist {
list-style: square inside url("basket.png");
}
ol#mycatsnames {
list-style: upper-alpha inside url("cat-face.png");
}
</style>

Just remember, when setting an ordered list to use an image, you’ll lose the ability to have the marker automatically change for each list item, and would have to set an image for each one separately.

Make a list, check it twice!

A bare-bones list is an easy addition to your web site, but taking just a little time to consider your options might make your lists a little more enticing to your users, and becomes especially important if those bullet pointed items are trying to help you sell a product or service.


Did you find this article helpful?