Styling Lists in CSS

In this article, we will go over the many ways which lists can be styled in CSS- both unordered lists and ordered lists.

By default, an unordered lists just contains bullets and a default font, such as that shown below:

List of Things to Do

• Take Out the Garbage
• Wash the Dishes
• Wash the Car
• Do the Laundry

This is how an unordered list will show up. However, we can style this above list to contain many different elements, if you want to change the look of this list.

CSS has many built-in functions which allow us to change the appearance of a list. We will go over these now below.

Styling Unordered Lists in CSS

You can see above how unordered lists come as default with dark, filled-in circles as bullet points for each list item. However, using CSS, we can change this to unfilled-in circles or square bullet points.

Unfilled Circle Bullet Points

Below is an unordered list with unfilled-in circle bullet points.

List of Things to Do

• Take Out the Garbage
• Wash the Dishes
• Wash the Car
• Do the Laundry

The CSS code to create the unfilled, circle bullet points above is:

ul { list-style-type: circle; }

Square Bullet Points

Below is an unordered list with square bullet points.

List of Things to Do

• Take Out the Garbage
• Wash the Dishes
• Wash the Car
• Do the Laundry

The CSS code to create the square bullet points above is:

ul { list-style-type: square; }

How to Change the Bullet Points to Pictures

We can change the bullet points to whatever image we want.

Below is an example of an unordered list which contains an image.

List of Things to Do

• Take Out the Garbage
• Wash the Dishes
• Wash the Car
• Do the Laundry

To create this above unordered list with any image which you want to display, use the following CSS code to do so:

ul { list-style-image: url('/images/green-box.jpg'); }

Note- If you specify an image and it either has a broken path or doesn't exist, then the web page will just show the regular, standard bullets instead of the image.

Styling Unordered Lists in CSS

In the same way, bullet points can be changed in unordered lists, they can be changed in ordered lists. INstead of changing the shapes, as in unordered lists, we can change whether the numerals are of the type of roman numerals or whether the list will list ordered alphabets instead of numbers.

This is how an ordered list in styled by default:

List of Things to Do

1. Take Out the Garbage
2. Wash the Dishes
3. Wash the Car
4. Do the Laundry

You can see they can come with numerals in ascending order. Now we will go over how you can syle them to show roman numerals or alphabets.

Roman Numeral Bullet Points

Below is an ordered list with roman numerals.

List of Things to Do

1. Take Out the Garbage
2. Wash the Dishes
3. Wash the Car
4. Do the Laundry

The CSS code to create the roman numerals above:

ul { list-style-type:upper-roman; }

If you want to change this to lowercase roman numerals, the CSS code would be:

ul { list-style-type:lower-roman; }

Alphabetical List

Below is an ordered list with ascending alphabets.

List of Things to Do

1. Take Out the Garbage
2. Wash the Dishes
3. Wash the Car
4. Do the Laundry

If you want to change this to lowercase alphabets, the CSS code would be:

ul { list-style-type:lower-alpha; }