HTML and CSS Reference
Designing a List
• To define the appearance of the list marker, use the style
list-style-type: type ;
where type is disc , circle , square , decimal , decimal-leading-zero ,
lower-roman , upper-roman , lower-alpha , upper-alpha , lower-greek ,
upper-greek , or none .
• To insert a graphic image as a list marker, use the style
list-style-image: url( url );
where url is the URL of the graphic image file.
• To set the position of list markers, use the style
list-style-position: position ;
where position is inside or outside .
• To define all of the list style properties in a single style, use the following style:
list-style: type url( url ) position ;
• To set the indentation of a list, apply the style
padding-left: size ;
where size is the length that the list should be indented.
List style types can be used with contextual selectors to create an outline style based
on nested lists. Figure 3-43 shows an example in which several levels of list style mark-
ers are used in formatting an outline. Note that each marker style is determined by the
location of the ordered list within the outline hierarchy. The top level is displayed with
uppercase Roman numerals; the bottom level, which is nested within three other ordered
lists, uses lowercase letters for markers.
Creating an outline style
text as rendered by the browser