In this tutorial we will learn about CSS List styling property.

The two commonly used HTML list types are unordered list ul and the ordered list ol.

We use the list-style property to style the lists.

Following is an example of an unordered list. We can see that the list items have a default padding on the left.

list-style-type

We use the list-style-type property to style the marker of the list item.

The default value for this property is disc. We can use other values like circle, square, none. We can also use values like upper-alpha, lower-alpha, upper-roman, lower-roman, decimal etc.

In the following example we have set the list-style-type to square.

ul {
	list-style-type : square;
}

If we don't want any style type then we set the property to none.

ul {
	list-style-type : none;
}

List Margin and Padding

In order to add/remove the margin from the list we can set the margin property of the list.

In the following example we have added 30px margin top-bottom to the list.

ul {
	list-style-type : square;
	margin-top : 30px;
	margin-bottom : 30px;
}

In the following example we have removed the margin from the list.

ul {
	list-style-type : square;
	margin : 0;
}

In the following example we have removed the padding from the list.

ul {
	list-style-type : square;
	margin : 0;
	padding : 0;
}

In the following example we have set the width of the list.

ul {
	list-style-type : square;
	width : 200px;
}

list-style-position

This defines how the text will appear if it continues to the next line. Default value is outside which means the line will continue with a left padding. If the value is set to inside then the line will continue below the list marker.

In the following example we have a sample list with list-style-position set to outside (the default value).

ul {
	list-style-type : square;
	list-style-position : outside;
	width : 200px;
}

In the following example we have a sample list with list-style-position set to inside. This will make the text start below the list marker in the new line.

ul {
	list-style-type : square;
	list-style-position : inside;
	width : 200px;
}

list-style-image

The list-style-image property allows us to use custom image to create disc for the list items.

In the following example we are using star image in place of default disc marker for the list items.

ul {
	list-style-image : url(star.png);
}

list-style shorthand

We can use the list-style property as a shorthand to set the above properties.

In the following example we have set the type, position and image for the list.

ul {
	list-style : square outside url(star.png);
}

Inline list

By default the list items are listed in a new line i.e., vertically. If we want to display them horizontally or inline we have to set the display property of the li elements to inline.

In the following example we are creating an inline list.

li {
	display : inline;
}

Styling ordered list

Now its time to style the ordered list.

The list-style-type of ordered list by default is a decimal number.

To change the type we can set the value to upper-alpha, lower-alpha, upper-roman, lower-roman.

In the following example we have set the list-style-type to upper-alpha.

ol {
	list-style-type : upper-alpha;
}

In the following example we have set the list-style-type to lower-roman.

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