list-style-type in CSS 1 & 2

Make your lists look like the Ten Commandments, or something from Trajan’s Column.

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 none, inherit, circle, disc, or square. (disc is the default; nested unordered lists will use circle and 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 list-style-type to none does not remove the indent on the list – in most browsers, that is controlled by margin-left.

For ordered lists the choices are quite a bit more varied. Aside from the aforementioned none and inherit, there is also:

List-style-type values in CSS Levels 1 & 2 (Examples are displayed inline to save space)
value	description	example
`armenian`	Armenian numbering
`cjk-ideographic`	Chinese, Japanese, Korean and Vietnamese shared numbering system
`decimal`	Decimal number; the default.
`decimal-leading-zero`	Decimal numbers starting with a 0
`georgian`	Georgian numbering
`hebrew`	Traditional Hebrew numbering
`hiragana`	Japanese numbering system, for values not covered by kanji
`hiragana-iroha`	Traditional pronounced Japanese numbering system
`katakana`	Japanese numbering system, a derivation of kanji
`katakana-iroha`	Traditional variation of katakana.
`lower-alpha / lower-latin`	Alphabetical, lowercase
`lower-greek`	Greek (alpha, beta, gamma) lowercase
`lower-roman`	Roman numbering, lowecase
`upper-alpha / upper-latin`	Alphabetical, uppercase
`upper-roman`	Roman numbering, uppercase

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.

IE6 does not display “non-English” counting systems, nor does it support decimal-leading-zero. All other browsers are fine with the systems above.

demosthenes.info

featured articles

popular favourites

list-style-type in CSS 1 & 2

web developer guide

featured comment

what i'm reading

what i'm watching

what i'm playing

what i'm hearing

blogs

podcasts

no ads ever

creative commons licensed