How To Customize List Style Using CSS

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.

Table of Contents

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:

See the Pen GJaapr by Shuseel Baral (@shuseel) on CodePen.

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:

See the Pen EjzzPB by Shuseel Baral (@shuseel) on CodePen.

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:

See the Pen mJYYWm by Shuseel Baral (@shuseel) on CodePen.

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.