CSS
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.
ul
ol
We use the list-style property to style the lists.
list-style
Following is an example of an unordered list. We can see that the list items have a default padding on the left.
We use the list-style-type property to style the marker of the list item.
list-style-type
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.
disc
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; }
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; }
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.
outside
inside
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; }
The list-style-image property allows us to use custom image to create disc for the list items.
list-style-image
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); }
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); }
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.
display
li
inline
In the following example we are creating an inline list.
li { display : inline; }
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; }