HTML and CSS Reference
In-Depth Information
Designing Styles for Lists
Tammy has placed her navigation links in an unordered list set on the left page margin.
As with all unordered lists, browsers display the list contents with bullet markers. Tammy
would like the bullets removed. To alter the appearance of this navigation list, you
change the default style applied by browsers.
Choosing a List Style Type
To change the marker displayed in ordered or unordered lists, you apply the style
list-style-type:
type
;
where
type
is one of the markers discussed in Figure 3-42.
Figure 3-42
List style types
list-style-type
Marker (s)
disc
z
circle
{
square
decimal
1, 2, 3, 4, …
decimal-leading-zero
01, 02, 03, 04, …
lower-roman
i, ii, iii, iv, …
upper-roman
I, II, III, IV, …
lower-alpha
a, b, c, d, …
upper-alpha
A, B, C, D, …
lower-greek
,
,
,
, …
upper-greek
A, B,
,
, …
none
no marker displayed
For example, to display an ordered list with alphabetical markers such as
A. Home
B. Getting Started
C. Scrapbooking Tips
D. Supply List
you would apply the following list style to the
ol
element:
ol {list-style-type: upper-alpha;}
