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.

CSS List Style properties


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 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
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;}
</style>
        

List Style Inside

  • List Style Position Inside
  • List Style Position Inside

<style>
    ul{ list-style-position:inside;}
</style>
        

List Style

List Style property is the shortcut of list style type / list style image with list style position. If position is mising, 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>