CSS List Properties

Hello guys. In this post we will learn CSS properties for lists. These properties can be applied for both ordered and unordered lists. CSS list properties are:
list-style-image is used to set the image for list item marker. Example ul{ list-style-image : url{'box.jpg'} }
box.jpg is url of the image.
list-style-type is used to specify the type of list item marker. Default value for unordered list is disc and decimal for ordered list. Other values for unordered list are circle, square and none. For ordered list values are decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha and none.
Example <h3>Unordered list demo</h3> <b>Circle</b> <ul style="list-style-type:circle"> <li>first list item</li> <li>second list item</li> </ul> <b>Square</b> <ul style="list-style-type:square"> <li>first list item</li> <li>second list item</li> </ul> <h3>Ordered list demo</h3> <b>Armenian</b> <ol style="list-style-type:armenian"> <li>first list item</li> <li>second list item</li> </ol> <b>Upper roman</b> <ol style="list-style-type:upper-roman"> <li>first list item</li> <li>second list item</li> </ol> <b>Georgian</b> <ol style="list-style-type:georgian"> <li>first list item</li> <li>second list item</li> </ol>
Output

Unordered list demo

Circle

• first list item
• second list item

Square

• first list item
• second list item

Ordered list demo

Armenian

1. first list item
2. second list item

Upper roman

1. first list item
2. second list item

Georgian

1. first list item
2. second list item

list-style-position property is used to position list item marker either inside or outside of rectangle. Its values are outside and inside. Default is outside.
Example <h3>Outside</h3>
<ul style="list-style-position:outside">
<li>This is first list item.It uses list style position property.<br/>This property has value outside.</li>
<li>This is second list item.It uses list style position property.<br/>This property has value outside.</li>
</ul>
<h3>Inside</h3>
<ul style="list-style-position:inside">
<li>This is first list item.It uses list style position property.<br/>This property has value inside.</li>
<li>This is second list item.It uses list style position property.<br/>This property has value inside.</li>
</ul>
Output

Outside

• This is first list item.It uses list style position property.
  This property has value outside.
• This is second list item.It uses list style position property.
  This property has value outside.

Inside

• This is first list item.It uses list style position property.
  This property has value inside.
• This is second list item.It uses list style position property.
  This property has value inside.

list-style is a shorthand property in which you can use all three properties at the same time. The order to write properties is list-style-type, list-style-position and list-style-image.
Example
 ul{list-style : circle, inside, none;}