Lists
| Property | Value | Description | N.N. | I.E. |
|---|---|---|---|---|
| list-style-type: | none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha |
Sets the type for the list item markers | 4.0 | 4.0 |
| list-style-image: |
none url |
Sets an image for the list item markers | 6.0 | 4.0 |
| list-style-position: | inside outside |
Sets the position of the list item markers | 6.0 | 4.0 |
| list-style: |
list-style-type list-style-position list-style-image |
Shortcut to set all three list styles | 6.0 | 4.0 |
|
||||
<li style="list-style-type:disc;">disc</li>
</ul>
- none
- disc
- circle
- square
- decimal
- decimal-leading-zero
- lower-roman
- upper-roman
- lower-alpha
- upper-alpha
- lower-greek
- lower-latin
- upper-latin
- hebrew
- armenian
- georgian
- cjk-ideographic
- hiragana
- katakana
- hiragana-iroha
- katakana-iroha
I basically used the code above to create the list below it. I used an inline style for each list item so each list item marker could demonstrate the style of marker defined in the list. If it doesn't, then your browser probably does't support that type of marker. If you would like to see what each one looks like, open this page in either Netscape or Mozilla and each should be displayed properly.
Notice that the list contains markers for both ordered and unordered list. The shapes are for an unordered list and numbers and letters for an ordered list. This style will work with ordered and unordered lists but not for a definition list since it has no markers. Normally you would probably want to create a style for the entire list by using the tags <ol> or <ul> as the selector. Like so:
list-style-type:upper-roman;
}
list-style-type:disk;
}
Don't like any of these markers? Then continue on to the next page to see how to add your own custom markers.
