CSS Lists

In CSS there are three types of lists: unordered <ul>, ordered <ol> and definition <dl> lists. Ordered and unordered are probably the most frequently used list types. There are many properties available which allow you to style lists.

Unordered / Ordered Lists

Unordered lists appear as black bullets by default; ordered lists appear as numbers.

List Type

ul
{
list-style-type:square;
}

Output

Images

ul
{
list-style-image:url(‘url to image’);
}

Inside and Outside

This property specifies whether the list style should be inside or outside.

ul
{
list-style-position:inside;
}

Output

These are the values available for the above properties:

Property	Values
list-style-type	Any of these values: Armenian | circle | decimal | decimal-leading-zero | disc | Georgian | lower-alpha | lower-Greek | lower-Latin | lower-Roman | square | upper-alpha | upper-Roman | none | inherit | initial
list-style-image	Any of these values: url(url to image) | none | inherit | initial
list-style-position	Any of these values: inside | outside | hanging | inherit | initial

Targeting the <li> element

You can also target the li element and format it in several ways. This is just one example, however CSS has many properties available.

li
{
font-size:12px;
}

Summary

This tutorial covered the basics of lists and their many available properties.