In CSS there is a property list-style which helps to customize style of a list. Using this property you can apply different types of list style like bullet, numbered and using custom image in bullet list ordered and unordered list. List styles values disc, circle and square are used on unordered lists and the values decimal, lower-roman, upper-roman, lower-alpha and upper-alpha are typically used on ordered lists. You can also use custom image on a list using list-style-image property. In this post I am describing the uses of those different types list style using list style properties in CSS.
Syntax:
list-style: list-style-type | list-style-position | list-style-image
Example:
ul {list-style: inside url(“image-bullet.gif”);}
ol {list-style: upper-roman outside;}
ul {list-style: inside square;}
How to Add Custom Image in a List
You can assign a graphic image to a list item using CSS list-style-image property. You have to give image url on this properties value. Here are the syntax and examples for adding custom image in a list.
Syntax:
list-style-image: url(url of image) | none
Example:
ul.first {list-style-image: url(“first list image.gif”);}
ul.second {list-style-image: url(“second list image.gif”);}
Demo:
How to Set the Position of a List
You can set the position of a list inside or outside by using the property list-style-position. This property specifies whether the labels for an element’s list items are positioned inside or outside the box defined by the listed item. Here are the syntax, examples and demonstration for adjusting the position of a list.
Syntax:
list-style-position: inside | outside | inherit
Example:
ol {list-style-type: lower-greek; list-style-positon: outside; background: pink;}
ul {list-style-type:disc; list-style-position:inside; background:yellow;}
Demo:
How to Style for Ordered List
You can style ordered list by assigning different values decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenial, georgian, lower-alpha and upper-alpha on list-style-type property. Here are the syntax, examples and demonstration to style ordered list.
Syntax:
list-style-type: decimal| decimal-leading-zero| lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit
Example:
ol.first {list-style-type:lower-greek;}
ol.second {list-style-type:upper-alpha;}
ol.third {list-style-type:georgian;}
Demo:
How to Style for Unordered List
To style unordered list, you can use the values disc, circle and square on list-style-type property. Here are the syntax, examples and demonstration to style unordered list.
Syntax:
list-style-type: disc | circle | square
Example:
ul.first { list-style-type: disc; }
ul.second {list-style-type: circle;}
ul.third {list-style-type: square;}
Demo:
