Bullet pointed HTML lists altered using CSS
Freeola Internet Get Dotted Domains Chat & Gaming
Using CSS to alter the style of your bullet pointed HTML lists
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:

 

  • Features your web site / service offers.

  • Times you are open.

  • Cooking instructions.

  • Items you have on special offer.

  • Directions to a location.

  • People who contribute to your web site.

  • Things you might want to make 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.

Go Back
Print this page

Thumbs up Thumbs down

There has been 1 comment submitted by users.
Avatar
Hmmm... commented on 10th November, 2011
This all looks interesting.
Is it possible to add some examples of each style to help the reader?

Printing Article

You have the option to print this article with or without comments. Comments are a way of providing visitors like you with the ability to give feedback to a specific article.


take a look at what our customers are saying...
...my thanks and praise to the lads who work in your customer service centre...

I have been with Freeola since I first went on line about 3 years ago, you also host my website and I have recomended you to many of my friends over the years. I would like to register my thanks and praise to the lads who work in your customer service centre at the other end of the phone when I need help, their patience and professionalism with me have always been of the best.

Great services and friendly support

I have been a subscriber to your service for more than 9 yrs. I have got at least 12 other people to sign up to Freeola. This is due to the great services offered and the responsive friendly support.

freeola & get dotted are passionate about help & support...

Enquiries & Advice 0871 210 9977

Calls cost 10p/min to BT customers. Other phone networks may vary.

Safe and Secure Payment