The easiest alteration to make to HTML lists is to change the value of
list-style-type. (Note that
list-style is a different property; the two are often confused). Under CSS Levels 1 and 2, the choices for
list-style-type are fairly limited. The options are significantly expanded in CSS3, but as a rule the CSS3 values are not (as of this writing) fully supported, even in the most recent browser versions.
For unordered lists the choices are
disc is the default; nested unordered lists will use
square for decoration, in that order, the deeper they are nested.
inherit simply means that the affected list will take the
list-style-type of its parent.). Note that setting the
none does not remove the indent on the list – in most browsers, that is controlled by
For ordered lists the choices are quite a bit more varied. Aside from the aforementioned
inherit, there is also:
The most important aspect to note about all of these options is that the markup of the ordered list does not change: you create the code for the list as normal, and make any changes to the way they are displayed by altering the CSS.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.