demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

list-style-type

css / lists

Estimated reading time: 1 minute, 36 seconds

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)
valuedescriptionexample
armenianArmenian numbering
cjk-ideographicChinese, Japanese, Korean and Vietnamese shared numbering system
decimalDecimal number; the default.
decimal-leading-zeroDecimal numbers starting with a 0
georgianGeorgian numbering
hebrewTraditional Hebrew numbering
hiraganaJapanese numbering system, for values not covered by kanji
hiragana-irohaTraditional pronounced Japanese numbering system
katakanaJapanese numbering system, a derivation of kanji
katakana-irohaTraditional variation of katakana.
lower-alpha / lower-latinAlphabetical, lowercase
lower-greekGreek (alpha, beta, gamma) lowercase
lower-romanRoman numbering, lowecase
upper-alpha / upper-latinAlphabetical, uppercase
upper-romanRoman 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.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.