CSS Lists
A CSS List is styling for the two type of HTML Lists: ul (unordered list) and ol (ordered list).
An unordered list is a list displayed in no particular order to the browser. Where it may be in some sort of order to the reader (such a list of ingredients by their importance) the list is not to be treated in any particular fashion. An ordered list is quite the opposite and increments for each list item.
By default the ul has a disc, which appears as a dot or bullet point. The HTML short-code for this is •. Other values include:
- None – Blank, nothing, nada, zilch.
- circle
- square
They are all quite obvious.
There are far more values for the ordered list (ol):
- decimal – a number
- decimal-leading-zero – a number with a preceeding 0 (01, 02, 03, …)
- georgian – a traditional georgian number (an, ban, gan, …)
- low-alpha – letter used (a, b, c, d, …)
- lower-greek – the greek alphabet is used (alpha, beta, …)
- lower-roman – traditional roman numerals are used (i, ii, iii, iv, v, …)
- All ‘lower’ items can also be ‘upper’: upper-roman, upper-latin, upper-alpha – all produce uppercase results.
These are all implemented using the list-style-type declaration. See the example below:
.circlebullet { list-style-type: circle; }
.romannumeral { list-style-type: lower-roman; }
Images can also be used as bullet items. For this, just use the declaration list-style-image in the same way as you would use the CSS Backgrounds code.
ul { list-style-image: url('images/my_bullet.gif'); }
