CSS LISTS

The lists in HTML are of two types:

Ordered list – It is the type of list where items are marked with numbers.

Unordered list – It is the type of list where items are marked with bullets.

 

But using CSS we can change the marking of these lists both ordered and unordered. This can be achieved by using list-style-type property of CSS.

For unordered list, we can have values such as circle, square, disc etc. And for an ordered list, the style can vary as lower-alpha, upper alpha, decimal, lower Roman and upper Roman.

It is important to note that this property can be applied to <ol>, <ul> and <li> elements.

For example,

ol{ list-style-type: decimal;}

 

Similar to this property we have another property called list-style-image wherein we can use an image as the bullet but this property can be applied on <ul> and <li> elements.

Example for this can be written as,

ul{ list-style-image: url('image1.gif';}

 

Next CSS property for lists is list-style-position. This property indicates whether the bullet or the numbering should appear inside or outside the box containing items.

For example, 

ul{ list-style-position: outside;}

 

We can also add colors to lists to make them look interesting. If we add the color effects only to <li> element then only individual list item will be affected. But if we add color effects to <ol> or <ul> tags then entire list will be affected.

For example,

li{ background: #ff8888;}