Producing web pages
* HTML CSS DHTML XHTML A to Z of tags        Accessibility          Design

list-style-type

The list-style-type property allows you to specify the type of bullets or numbers that you want to use for lists. It also allows you to specify that numbered lists use a counting system other than decimal and roman.

To create a bulleted (an unordered) list, you can display the bullet as a disc, a circle or a square. You can also set the list-style-type to none. This turns off the bullets but keeps the indentation.

For example:

ul {list-style-type: disc;}
ul {list-style-type: circle;}
ul {list-style-type: square;}

If you set the type of bullet for the <ul> tag, the same bullet appears for every item in the list. Alternatively, you can apply the property to each list item. For example:

li.disc   {list-style-type: disc;}
li.circle {list-style-type: circle;}
li.square {list-style-type: square;}

To create a numbered (an ordered) list, you set the type of numbering that you want to use. You can also set the list-style-type to none. This turns off the numbers but keeps the indentation. For example:

ol.ualp    {list-style-type: upper-alpha;}
ol.lalp    {list-style-type: lower-alpha;}
ol.dec     {list-style-type: decimal;}
ol.zdec    {list-style-type: decimal-leading-zero;}
ol.urom    {list-style-type: upper-roman;}
ol.lrom    {list-style-type: lower-roman;}
ol.ulat    {list-style-type: upper-latin;}
ol.llat    {list-style-type: lower-latin;}
ol.ugreek  {list-style-type: upper-greek;}
ol.lgreek  {list-style-type: lower-greek;}

If you set the type of numbers for the <ol> tag, the same type of numbering appears for every item in the list. Alternatively, you can apply the property to each <li> list item.

Other counting systems appeared in the CSS2 specification. You can choose: hebrew, armenian, georgian, cjk-ideographic, hiragana, hiragana-iroha, katakana, and katakan-iroha.

For example:

ol.heb    {list-style-type: hebrew}