CSS Bullet Points and Numbered Lists

Following on from our most popular tutorial on HTML Bullet Points, let’s now have a bit of an easier CSS tutorial on how to format bulleted and numbered lists in CSS. This will lead onto a future tutorial on using <ul> and <ol> to create navigation menus.

But as these CSS3 Tutorials assume no prior knowledge, let’s do things one step at a time!

Changing the Bullet Style

As with HTML, you can define an unordered list with a set of basic shapes. At this point it would be helpful for me to point out that the style of bullet point can be set at <ul> and <li> level. This means you can set the same appearance for all bullets in a list or set individual styles per bullet point, if you really want to.

Basic Bullet Styles – Square, Disc, Circle

To set the bullet appearance you can use CSS’ list-style or list-style-type. list-style-type is the exact property we are changing here, but you can also use list-style to change multiple properties, which we will come to shortly.

<ul> <li style="list-style:square;">Square Bullets</li> <li style="list-style:disc;">Disc Bullets</li> <li style="list-style:circle;">Square Bullets</li></ul>

As with HTML Bullets, you can set these as circle, square or disc. Why do it with CSS if you can do it in HTML? Well, if you use an external CSS file, you can set it once and all your bullet lists are consistent:

ul{ list-style:square;}

This means that

You don’t have to remember to set the bullet appearance each time.
After the first list you create, subsequent lists use fewer bytes of code, making the page quicker to load.

Using an Image For a Custom Bullet Point List

One thing you can’t do easily with HTML alone is create custom bullet points. With Cascading Style Sheets, this is a breeze. Firstly you’ll need to create an image ready. I created a simple 10px × 10px PNG ready for this exercise.

To switch a ‘standard’ bullet point appearance for your custom image, you need to use list-style-image which takes a url() value, like this:

ul{ list-style-image:url('/path/to/custom-bullet.png');}

You will need to ensure your path is correct. If you’re using a <link> tag then your path can be relative to the folder that your .css file is in. Using my PNG I am able to make my bullet point list look like this:

Bullet 1

Bullet 2
Bullet 3

Bullet Point Position

When you first create a bullet list in HTML, your browser will assign a padding and margin to both your UL and LI elements. To get full control you are best setting your desired padding and margin straight away.

On top of that CSS gives you the list-style-position property. There’s a great demo of this over at CSS Tricks.

list-style-property takes two values: inside or outside. You’ll need to play with your code to find the most appropriate setting for your web page.

Combining These Into list-style

I said earlier that list-style is a shorter version but that takes multiple properties. Take a look here:

ul{ /*   list-style: [list-style-type] [list-style-position] [list-style-image]; */  list-style:square inside url('custom-bullet.png');}/* is the same as */ul{ list-style-type:square; list-style-position:inside; list-style-image:url('custom-bullet.png');}

Using a shorthand method in CSS saves you bytes of data, and RSI in typing! If you would rather set each line individually, then feel free. Just know there is a quicker way!

Ordered List Styles

So far we have dealt with Unordered Lists. But ordered lists also come with a variety of list-style-types

armenian

cjk-ideographic
decimal
decimal-leading-zero

hebrew
hiragana
lower-alpha

lower-greek
lower-latin
lower-roman

upper-alpha
upper-latin
upper-roman

It’s probably not a good idea to do what I have done here – that will confuse users. But if you prefer Roman Numerals for your lists, for example, you can do that in CSS.

Bullet Lists With No Bullets in CSS

Why would you use a bullet list, if you intended on not using bullets of some description? Sometimes in web design, using a pattern which repeats (which a bullet list does) is a good way to layout certain items on the page. A ‘recent products’ added to an e-commerce shop might be one example. Another application which is commonly used now is to employ an unordered list to create a navigation bar. I will go into this in more detail later, but you can set a bullet list to have no bullets really easily:

ul,li{ list-style:none; }

Remember doing it this will actually do that to all your unordered lists. So you may want to be more granular than that either with CSS Classes, or by specifying a hierarchy. If you just want this to be done inside your <nav> tags you can remove the bullets like so:

nav ul,nav li{ list-style:none; }