CSS Basics: List Properties

Last week I covered the HTML Basics for using Lists. This week and next, we will cover the CSS properties for use with lists.

List Specific Properties

We have 3 properties that are specifically for unordered and ordered lists.

list-style-type

The list-style-type property allows you to control the appearance of the list ‘marker’ ie. the bullet point style for unordered lists or the numbering system for an ordered list. For both types of lists you can have the values of inherit or none. The latter will remove the bullet/number altogether.

For an unordered list you can select to have a value of disc, circle or square e.g.

ul.squarelist {
    list-style-type: square;
}
ul.disclist {
    list-style-type: disc;
}

For an ordered list you can use the following property values:

decimal

Sequential numbers starting from 1

decimal-leading-zero

Sequential numbers starting from 0

lower-roman

Lowercase roman numerals – i, ii, iii, iv, v etc.

upper-roman

Uppercase roman numerals

lower-greek

Lowercase greek alphabet – α, β, γ etc.

lower-latin

Lowercase latin alphabet – a, b, c, d, e etc.

upper-latin

Uppercase latin alphabet

armenian

Armenian numbering

georgian

Georgian numbering

Example usage of these would be

ol.roman {
    list-style-type: lower-roman;
}
ol.alpha {
    list-style-type: lower-latin;
}

Giving

1. First item
2. Second item
3. Third item

and

1. First item
2. Second item
3. Third item

list-style-image

For unordered lists, you can also specify an image to use for the bullet point. The property value is the same as setting a background image ie.

ul {
    list-style-image: url("http://www.domain.com/path/to/file/bullet.gif");
}

This will then display as the bullet point instead of the bullet point, providing you haven’t set the list-style-type value to ‘none’.

list-style-position

Finally the third list specific property is the position of the marker. By default you have a bullet point away from the block of text which is the value ‘outside’, however you can also give the property value of ‘inside’ to bring the bullet point into the block of text for each list item i.e.

Outside Position

ul.outside {
    list-style-position: outside;
}

• First item
  First item, second line
• Second item
  Second item, second line

Inside Position

ul.inside {
    list-style-position: inside;
}

• First item
  First item, second line
• Second item
  Second item, second line

As you can see, the second list has the bullet within the block of text.

list-style

The list-style property allows you to combine all 3 list style properties in one property. There is no specific order for these property values e.g.

ul {
    list-style: circle inside url("images/square-bullet.gif");
}

This would give your unordered lists circle bullet points, positioned inside the list item block, and would use the square-bullet.gif image for the bullet point (which would then replace the circle bullet points providing the image loads).

Additional CSS Properties

Lists can also use the standard background and font styling properties, along with certain positioning properties which will be covered next week.

Written by Sarah from Stuff By Sarah
Posted on December 25th, 2008 and filed under CSS
Do not forget to subscribe to our RSS feed for updates

2