CSS List Style | List style type, position, image

CSS List Style Property

CSS List Style Property is used to change list style type / list style image and list style position of HTML Lists. Till HTML4/ XHTML, type attribute can change list style of list using type attribute. But in HTML5, type attribute on unordered list is depreciated and we have to use css list style property.

List Style Type

List Style type property is used to change type of bullet style in list which is by default disc in <ul> and 1 in <ol>. There are so many values for list style type. We can also set custom list style.

List Style for Unordered List

List Style Type	Use	Example
none	to remove list style	List style none List style none
disc	a filled circle	List disk List disk
circle	a hollow circle	List circle List circle
square	a filled square	List square List square

List Style for Ordered List

List Style Type	Use	Example
decimal	decimal numbers	List decimal List decimal
decimal-leading-zero	decimal started with zero	decimal leading zero decimal leading zero
lower-roman	lowercase roman	lowercase roman lowercase roman
upper-roman	uppercase roman	uppercase roman uppercase roman
lower-greek	greek i.e. alpha, beta, gamma	lower greek lower greek
lower-alpha	Lowercase alphabets	lower alpha lower alpha
upper-alpha	Uppercase alphabets	upper alpha upper alpha
devanagari	devanagari characters ( for hindi & sanskrit )	devanagari devanagari

List Style Image

List style image property is used to add image in list style. For a single list, either list style type or list style image is used. We can't use both together.

To use list style image, always use a small image.If image size is large, all list item will expand.

List Style Image Example

List Style Image
List Style Image


<style>
    ul{ list-style-image:url(img/arrow1.png);}
</style>

List Style Image
List Style Image


<style>
    ul{ list-style-image:url(img/arrow2.png);}
</style>

List style Position

List Style Position property change position of list style type or image from outside to inside. The default value of list style position is outside.

List Style Outside

List Style Position Outside
List Style Position Outside


<style>
    ul{ 
        list-style-position:outside; 
        padding:0; 
        border:1px solid #333;
    }
    ul li{ 
        border:1px solid #333;
         padding:5px;
    }
</style>

List Style Inside

List Style Position Inside
List Style Position Inside


<style>
    ul{ 
        list-style-position:inside; 
        padding:0; 
        border:1px solid #333;
    }
    ul li{ 
        border:1px solid #333; 
        padding:5px;
    }
</style>

List Style

List Style property is the shortcut of list style type / list style image with list style position. If position is missing, default value i.e. outside will be considered. See example

List Style Example

List Style image outside
List Style image outside


<style>
    ul{ list-style:url(img/arrow.png) outside;}
</style>

List Style image inside
List Style image inside


<style>
    ul{ list-style:url(img/arrow.png) inside;}
</style>