CSS List

Lists in HTML are used to display text as a list of related items. It improved readability of content. Lists can be bulleted or numbered. CSS List properties are used to define the look of the lists in terms of bullet style, numbers or markers. You can also set the position of list markers with respect to the text.

CSS list properties can be applied with STYLE attribute of <UL> or <OL>  for complete list. If you want to apply the style only for selected items of the list you must use STYLE property of <LI> tag.

CSS List Properties

List Style Type

The LIST-STYLE-TYPE property of CSS list is used to modify appearance of the list item marker. You can modify the markers of ordered and unordered lists.

 If you need to redefine markers of an unordered list then the allowed values for list-style-type are none, disc (default value), circle and square.  

If you have to modify numbering for an ordered list the values are decimal, leading-zero, lower-alpha, upper-alpha, lower-roman and upper-roman.



List Style Image

The LIST-STYLE-IMAGE property of CSS list is used to set an image as the marker of the list item. The name of the image file is set as the value of this property. You can use this property to customize your lists to match the website template or design. If the image defined for this property is not available or wrongly named, the default bullet or marker will be used instead.


<UL|OL|LI STYLE= ”LIST-STYLE-IMAGE: url(filename );”>

List Style Position

The LIST-STYLE-POSITION property of CSS list is used to set the position where you want the marker to appear in the List Items. The marker can be inside or outside the box containing all the list items. This property takes one of the two values- inside or outside.


<UL|OL|LI STYLE= ”LIST-STYLE-POSITION: inside | outside;”>

List Style

If you don’t want to use above mentioned CSS List properties individually, you can use LIST-STYLE property to set values for all these in one go. The order of values of these properties is irrelevant. The values set against LIST-STYLE will automatically define what property to be set with what value.


<UL STYLE="list-style-type:circle;">
<LI >Computer Science</LI>
<LI STYLE="list-style-type:square;">Mathematics</LI>
<LI STYLE="list-style-position:inside;list-style-image:url(purple.png);">Philosophy</LI>
<LI STYLE="list-style-position:outside;">Engineering</LI>
<LI STYLE="list-style-image:url(red.png);">Chemistry</LI>
<LI STYLE="list-style-type:small-lower-alpha;">Under Graduate</LI>
<LI STYLE="list-style-type:lower-greek;">Post Graduate</LI>
<LI STYLE="list-style-type:lower-roman;">Certificate </LI>
<LI STYLE="list-style-type:upper-alpha;">Diploma</LI>
<UL STYLE="list-style:inside url(yellow.png)">
<LI STYLE="list-style-type:small-lower-alpha;">Newton</LI>
<LI STYLE="list-style-type:lower-greek;">Von-Newmann</LI>
<LI STYLE="list-style-type:lower-roman;">Curie </LI>
<LI STYLE="list-style-type:upper-alpha;">Augusta</LI>
CSS Result Output