HTML and CSS Reference
In-Depth Information
Chapter 23
List
The CSS list properties deal with the list elements, specifically the
<ul>
,
<ol>
, and
<li>
elements.
list-style-type
Lists are rendered with a marker shown before each list item element (
<li>
). The
appearance of this marker can be changed using the
list-style-type
property. For an
unordered list (
<ul>
), each list item is marked in the same way. The predefined bullet
values shown here can be used, with
disc
(a filled circle) as the default value:
list-style-type : inherit | disc | circle | square | none
In an ordered list (
<ol>
), each list item is marked with a numeric character to show
its position in the sequence. All major browsers support the following numeric types, with
decimal
as the initial value:
list-style-type : inherit | decimal | none | upper-alpha | lower-alpha |
upper-roman |
lower-roman | lower-greek | lower-latin |
armenian | georgian |
decimal-leading-zero
The following example assigns a new list style for the two list elements. It is possible
to make the
<ul>
display ordered markers and the
<ol>
to display unordered markers, but
this is not good practice.
ul { list-style-type: square; } /*
▅
*/
ol { list-style-type: upper-roman; } /* I, II, III, ... */
The color of the marker is the same as the text color of the list element. Keep in mind
that any element can be made to display list markers by changing its display type to
list-item
.
