CSS List - CSS - dyclassroom | Have fun learning :-)

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.

Apple
Ball
Cat

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;
}

Apple
Ball
Cat

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

ul {
	list-style-type : none;
}

Apple
Ball
Cat

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;
}

Apple
Ball
Cat

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

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

Apple
Ball
Cat

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

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

Apple
Ball
Cat

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

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

This is a text inside the list item of unordered list.
You are reading the 2nd list item.
And this is the last item of the list.

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;
}

This is a text inside the list item of unordered list.
You are reading the 2nd list item.
And this is the last item of the list.

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;
}

This is a text inside the list item of unordered list.
You are reading the 2nd list item.
And this is the last item of the list.

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);
}

This is a text inside the list item of unordered list.
You are reading the 2nd list item.
And this is the last item of the list.

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);
}

This is a text inside the list item of unordered list.
You are reading the 2nd list item.
And this is the last item of the list.

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;
}

Apple
Ball
Cat

Styling ordered list

Now its time to style the ordered list.

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

Apple
Ball
Cat

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;
}

Apple
Ball
Cat

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

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

Apple
Ball
Cat