HTML and CSS Reference
In-Depth Information
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.
Figure 3-43
Creating an outline style
styles
text as rendered by the browser
HTML code
