CSS List Style

Lists are an important way to display data in HTML. When you have a number of items with a common theme, such as shoe sizes or navigation tools, the most effective way to present the data may be to use a list.

By default, lists in HTML are quite plain. That’s where the CSS list-style property comes in. The list-style property and its sub properties are used to customize lists to complement your unique website design.

This tutorial will cover, with examples, how to style lists in CSS using the list-style property and its sub properties. It will also cover how to set the background colors of a list and its items. After reading this tutorial, you’ll be an expert at styling lists using CSS.

HTML and CSS Lists

Lists are used to show a number of connected items. In HTML, there are three types of lists you can use to present data. These are:

• Unordered lists (<ul>) – A list of items whose values are marked using bullet points.
• Ordered lists (<ol>) – A list of items whose values are marked using an ordering system (for example, sequential numbers or letters).
• Definition lists (<dl>) – A list of items with accompanying descriptions.

If you’re interested in learning more about HTML lists, read our article on lists in HTML. 

Each of the above list types come with its own default HTML style. Additionally, CSS offers a number of properties you can use to make your lists more aesthetically pleasing and better aligned with your style guide.

The CSS list properties allow you to:

• Change the item markers for ordered lists.
• Change the item markers for unordered lists.
• Set an image as a list item marker.
• Add background colors to lists and their items.

In this tutorial, we will discuss two overarching ways to style lists in CSS: the list-style property via its individual sub properties, and the list-style shorthand property. The sub properties of the list-style property are:

• list-style-type
• list-style-position
• list-style-image

The list-style shorthand property is written as: 

list-style: [list-style-type] [list-style-position] [list-style-image]; 

We will also discuss how to add background colors to lists and list items.

Basic HTML List Example

First, let’s look at an example of a list in HTML. Suppose a local bakery asks us to create a web page that includes a list of recipes for customers’ home use. 

Here is the basic HTML code we will use to define our list:

<ul>
	<li>Butterfly Cakes</li>
	<li>Chocolate Traybake</li>
	<li>Lemon Pound Cake</li>
	<li>Peanut Butter Flapjacks</li>
	<li>Chocolate Muffins</li>
</ul>

Our list appears as follows:

Our list contains five items. We enclose each list item within <li> tags. (“li” stands for “list item.”) We enclose these <li> tags within a <ul> tag. The <ul> tag identifies an unordered list. 

Since this is an unordered list, our web browser places a bullet point before each of the items in the list. (If it were an ordered list, our web browser would place an orderable value—usually a number or a letter—before each item in the list.)

Now, let’s explore how we can style a list using the list-style property.

List Item Markers

The list-style-type property is used to specify the type of marker used for items in a list.

Unordered List Item Markers

Suppose the bakery asks us to show what their list would look like with a circle bullet point versus a square bullet point preceding each list item. We can use the following code to create these designs for the bakery:

styles.css

li.circlebulletPoint {
	list-style-type: circle;
}

li.squarebulletPoint {
	list-style-type: square;
}

index.html

<ul>
	<li class="circlebulletPoint">Butterfly Cakes</li>
	<li class="squarebulletPoint">Chocolate Traybake</li>
	<li>Lemon Pound Cake</li>
	<li>Peanut Butter Flapjacks</li>
	<li>Chocolate Muffins</li>
</ul>

Our code returns:

As you can see, our first list item uses the circle bullet point marker style. We accomplished this by assigning the class value “circlebulletPoint”—and therefore that value’s corresponding style—to our first list item. We assigned the class value “squarebulletPoint” to our second list item, so the web browser displays a square bullet point before that item. 

There are other list-style-types which can be applied to a list, which are:

• disc
• circle
• decimal
• decimal-leading-zero
• lower-roman
• upper-roman
• lower-greek
• lower-latin
• upper-latin
• armenian
• georgian
• lower-alpha
• none

We discuss a few of these that apply to ordered lists in the next section.

Ordered List Item Markers

Ordered lists have their own item marker styles.

Suppose we want the bakery’s recipes to be displayed in an ordered list. We want to see what our list would look like with its order marked by a lowercase alphabetical letter preceding each item in the list, and what it would look like with an uppercase Roman numeral preceding each item in the list. We could use the following code to accomplish this task:

styles.css

li.alpha {
	list-style-type: lower-alpha;
}

li.roman {
	list-style-type: upper-roman;
}

index.html

<ol>
	<li class="alpha">Butterfly Cakes</li>
	<li class="roman">Chocolate Traybake</li>
	<li>Lemon Pound Cake</li>
	<li>Peanut Butter Flapjacks</li>
	<li>Chocolate Muffins</li>
</ol>

Our code returns:

In this example, we used an ordered list (<ol>) instead of an unordered list. This allows us to order our list with numbers (or letters, etc.). Then, we marked the first item in our list with a lowercase alphabetical letter and the second item in our list with an uppercase Roman numeral.

Remove Default List Item Marker Styling

There are three CSS properties we can use in our code to remove aspects of default styling from a list: list-style-type, margin, and padding.

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

Find Your Bootcamp Match

Setting list-style-type to None

If we don’t want any sort of bullet point or ordinal indicator (like a number or letter) before list items, we can set the list-style-type property to none. Here’s an example of using this property to remove any bullet point or ordinal indicators in a list:

styles.css

ul {
	list-style-type: none;
}

index.html

<ul>
	<li>Butterfly Cakes</li>
	<li>Chocolate Traybake</li>
	<li>Lemon Pound Cake</li>
	<li>Peanut Butter Flapjacks</li>
	<li>Chocolate Muffins</li>
</ul>

Our code returns:

Our list is still structured as a list, but when displayed on the web page, the list’s items lack markers.

Marker Position

The list-style-position property is used to specify the position of the list item markers in a list.

There are two positions in which the item markers for a list can appear: inside and outside. If the list markers appear inside the list, the text will appear directly next to the item markers; if the list markers appear outside the list, there will be a gap between the list markers and the text items in the list.

Here are two example CSS rules which demonstrate how the list-style-position can be applied in both of these states:

ul.a {
	list-style-position: outside;
}

ul.b {
	list-style-position: inside;
}

In our first list, we used the list-style-position: outside style. This is the default style applied to lists. As such, had we not specified this or any other list-style-position in our block of code, the browser would have defaulted to this positioning for list item markers. The following is the code for our bakery list that uses this style:

<ul class="a">
	<li>Butterfly Cakes</li>
	<li>Chocolate Traybake</li>
	<li>Lemon Pound Cake</li>
	<li>Peanut Butter Flapjacks</li>
	<li>Chocolate Muffins</li>
</ul>

The code returns:

In this style, list item markers (in this case, bullet points) appear outside of our list items.

In our second list, we have specified the position of our list item markers as “inside.” The following is the code for our bakery list that uses this style:

<ul class="b">
	<li>Butterfly Cakes</li>
	<li>Chocolate Traybake</li>
	<li>Lemon Pound Cake</li>
	<li>Peanut Butter Flapjacks</li>
	<li>Chocolate Muffins</li>
</ul>

The code returns:

It’s hard to tell but the position of our list item markers is now outside the list item.

Image Marker

Lists often use custom markers with images. If you want to set the marker for a list item to an image, you can use the list-style-image CSS property.

Suppose the bakery asks us to change the list item markers in their list to images of a cake (instead of a bullet point, number, etc.). We can use the following code to accomplish this task:

styles.css

ul {
	list-style-image: url("https://img.icons8.com/small/16/000000/cake.png");
}

index.html

<ul>
	<li>Butterfly Cakes</li>
	<li>Chocolate Traybake</li>
	<li>Lemon Pound Cake</li>
	<li>Peanut Butter Flapjacks</li>
	<li>Chocolate Muffins</li>
</ul>

Our code returns:

As you can see, instead of using a default list item marker, we used our own. In this case, our list item marker is an image of a cake.

List Style Shorthand Property

We have been discussing the sub properties of the list-style property. These have allowed us to apply individual styles to our list.

However, there is a more efficient way of styling lists. Instead of using each individual subproperty to style a list, we can use the list-style shorthand property. Here is the syntax for the list-style shorthand property:

ul {
	list-style: [list-style-type] [list-style-position] [list-style-image];

The order of values specified above is the order you need to use with the list-style shorthand property. If you do not specify a value for one of the three sub properties that make up the shorthand syntax, the web browser will use that subproperty’s default value. 

Suppose we want to style our list of baked goods recipes with a cake image and also move each list item marker to the outside of our list. We can do so using this code:

styles.css

ul {
	list-style: outside url('https://img.icons8.com/small/16/000000/cake.png');
}

index.html

<ul>
	<li>Butterfly Cakes</li>
	<li>Chocolate Traybake</li>
	<li>Lemon Pound Cake</li>
	<li>Peanut Butter Flapjacks</li>
	<li>Chocolate Muffins</li>
</ul>

Our code returns:

Our list now uses the cake image for each list item marker. In addition, each list item marker is styled outside our list. 

CSS List Colors

When you’re designing a list, you may decide that you want the list to display background colors.

Suppose the bakery asks us to set the background color of the entire list to light blue and to use a pink background color for each item in the list. We can use the CSS background property to accomplish this task, like so:

ul {
	background: lightblue;
	padding: 10px;
}

ul li {
	background: pink;
	margin: 10px;
}

Our code returns:

<ul>
	<li>Butterfly Cakes</li>
	<li>Chocolate Traybake</li>
	<li>Lemon Pound Cake</li>
	<li>Peanut Butter Flapjacks</li>
	<li>Chocolate Muffins</li>
</ul>

In our code, we applied a light blue background color using the background property to the <ul> element, which creates an unordered list. We also gave the <ul> element a 10px padding using the padding property.

We also applied a pink background to and created a 10px margin around each list item. 

We accomplished this by including our styles in a “ul li” selector, as you can see above. This selector states that the pink background and 10px margin should be applied to all <li> tags enclosed within a <ul> tag.

Conclusion

When you’re working with HTML lists, you can use CSS to apply custom styles to those lists to make them more aesthetically pleasing. The list-style property is used to apply styles to (or remove styles from) a list in CSS.

This tutorial discussed, with examples, how to use the CSS list-style property and its three sub properties. We also discussed how to set background colors for a list and the items within it.

Now you have the knowledge you need to start styling lists in CSS like a pro!