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.
[sourcecode language="css"]ul.squarelist {
list-style-type: square;
}
ul.disclist {
list-style-type: disc;
}[/sourcecode]
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
[sourcecode language="css"]ol.roman {
list-style-type: lower-roman;
}
ol.alpha {
list-style-type: lower-latin;
}[/sourcecode]
Giving
- First item
- Second item
- Third item
and
- First item
- Second item
- 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.
[sourcecode language="css"]ul {
list-style-image: url(“http://www.domain.com/path/to/file/bullet.gif”);
}[/sourcecode]
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
[sourcecode language="css"]ul.outside {
list-style-position: outside;
}[/sourcecode]
- First item
First item, second line - Second item
Second item, second line
Inside Position
[sourcecode language="css"]ul.inside {
list-style-position: inside;
}[/sourcecode]
- 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.
[sourcecode language="css"]ul {
list-style: circle inside url(“images/square-bullet.gif”);
}[/sourcecode]
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.
