HTML XHTML The Complete Reference
home » reference » appendix b » css1 / css2 properties

list-style


This shorthand property sets list-style-type, list-style-position and list-style-image. In practice, the properties can appear in any order, but they ought to be written in the presented order.

Examples


ul {list-style: inside url("bullet.gif");}
#square {list-style: outside square;}
ol {list-style: lower-roman inside;}

Browser and CSS Support Notes


CSS1
IE 4, 5, 5.5, 6
Nav 6, 7
Opera 4, 5, 6, 7


list-style-image


This property assigns a graphic image to a list label, using the URL of the image. The value for list-style-image other than a URL is none.

Example


ul {list-style-image: url(ball.gif);}

Browser and CSS Support Notes


CSS1
IE 4, 5, 5.5, 6
Nav 6, 7
Opera 4, 5, 6, 7


list-style-position


This property specifies whether the labels for an element's list items are positioned inside or outside the "box" defined by the list. The difference is illustrated clearly here.

Example


ol {list-style-type: upper-roman; list-style-position: outside; background: yellow;}
ul {list-style-type: square; list-style-position: inside; background: yellow;}

Browser and CSS Support Notes


CSS1
IE 4, 5, 5.5, 6
Nav 6, 7
Opera 4, 5, 6, 7


list-style-type


This property defines labels for ordered and unordered lists or elements that have their display property set to list-item. The value none prevents a list label from displaying. CSS1 defines disc, circle, and square, which are typically used on unordered lists (<ul>). The values decimal, lower-roman, upper-roman, lower-alpha, and upper-alpha are typically used on ordered lists (<ol>). These property types correspond to the HTML/XHTML type attributes for lists. CSS2 adds more type values primarily for ordered lists in foreign languages. The CSS2 values include decimal-leading-zero, lower-greek, lower-latin, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, and katakana-iroha.

Examples


ol {list-style-type: upper-roman;}
ol.none {list-style-type: none;}
.ichi-ni {list-style-type: hiragana;}

Browser and CSS Support Notes


CSS1
IE 4, 5, 5.5, 6
Nav 4, 4.5-4.8, 6, 7
Opera 4, 5, 6, 7

TIP Many of the CSS2 values for list-style-type are not supported in browsers.

(X)HTML Elements
CSS Properties
Back: line-height Next: margin properties
< Home | About | Chapters | Examples | Errata | Reference | Site Map >