Section 23.1. CSS for Lists

23.1. CSS for Lists

Bulleted and numbered lists have been around since the very beginning of HTML.^[*] Extensions to the ul and ol elements gave designers the ability to choose a bullet shape or numbering format, but beyond that, authors have had little control over list presentation. CSS 2.1 offers some improvements, most notably the ability to replace bullets with your own images.

^[*] One of the earliest documentations of the HTML language (dated 1992) defines the ul tag and describes ordered lists. To learn about HTML's humble beginnings, visit www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html.

In modern standards- and accessibility-driven web design, lists are being used in interesting ways to create navigation that previously would have been created with graphics and JavaScript (see Chapter 24).

23.1.1. Choosing a Marker

Ordered and unordered lists are unique elements in that they automatically add a marker (a bullet or a number) to the page that isn't part of the document source. Use the list-style-type property to select the type of marker that appears with each list item. This property replaces the deprecated type attribute in XHTML.

list-style-type

---

Values:

 disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | lower-alpha | upper-alpha | none | inherit 

Initial value:

 disc 

Applies to:

Elements whose display value is list-item (in XHTML, the ul, ol, and li elements)

Inherited:

Yes

Three values for list-style-type (disc, circle, and square) generate a bullet shape, just as browsers have been doing for unordered lists for years. The actual design and rendering of each bullet shape is left to the user agent. In other words, there is no way to alter the color, size, or other presentation attributes of a generated bullet. Figure 23-1 shows each of the bullet markers .

Figure 23-1. list-style-type: disc, circle, and square

The remaining value keywords specify various numbering and lettering styles. Table 23-1 lists the keyword and numbering types provided in CSS 2.1.

Table 23-1. Lettering and numbering system keywords in CSS 2.1

Keyword	System
decimal	1, 2, 3, 4, 5...
decimal-leading-zero	01, 02, 03, 04, 05...
lower-alpha	a, b, c, d, e...
upper-alpha	A, B, C, D, E...
lower-latin	a, b, c, d, e... (same as lower-alpha)
upper-latin	A, B, C, D, E... (same as upper-alpha)
lower-roman	i, ii, iii, iv, v...
upper-roman	I, II, III, IV, V...
lower-greek	Lowercase classical Greek symbols

A handful of numbering keywords that were included in CSS 2 were removed from 2.1 due to the difficulty in implementing them and the resulting poor browser support. They include: hebrew, cjk-ideographic, and the Japanese numbering systems katakana, katakana-iroha, hiragana, and hiragana-iroha. Additionally, the values armenian and georgian were in a CSS 2.1 Candidate Recommendation but at risk of being dropped due to lack of implementation. The various international list numbering styles are defined in far more detail in the CSS 3 Lists Module.

The user agent controls the presentation of the generated numbers and letters, although they usually match the font properties of the associated list items. There is no way to change the font, size, color, or other presentation features of number or letter markers . When numbers run several digits long, the user agent determines whether the markers should be left or right justified.

The CSS specification also does not specify what should be done when a lettering system runs out of letters. For long lists, true numbering systems are recommended.

If you want to turn the marker off for a list item, choose the value none. Setting the list-style-type to none for an item or items does not prevent that item from being counted by the counting mechanism; it merely causes the number not to display.

Be aware that even though list-style-type is an inherited property, it may be necessary to explicitly declare styles for each level of nested list element in order to override browsers' built-in style sheets for nested list marker types.

23.1.2. Marker Position

By default, the marker hangs outside the content area for the list item, usually displaying as a hanging indent. The list-style-position property allows you to pull the bullet inside the content area so it runs into the list content.

list-style-position

---

Values:

 inside | outside | inherit 

Initial value:

 outside 

Applies to:

Elements whose display value is list-item (in XHTML, the ul, ol, and li elements)

Inherited:

Yes

Figure 23-2 shows the difference between the outside and inside marker positions as indicated by the following styles. Note that the dotted lines are a device to indicate the edges of the content area only and would not actually display.

 li.one {list-style-position: outside;} li.two {list-style-position: inside; } 

Figure 23-2. list-style-position

Unfortunately, that's about all you can do with list-style-position. It does not provide a way for authors to adjust the distance or position of the marker relative to the list item. CSS 2.1 leaves the distance to the user agent. Interestingly, CSS 2 included the marker-offset property for this very purpose, but it was dropped in CSS 2.1 because it was determined not to be the best solution for the problem. Look for improved control over marker placement in CSS Level 3.

Internet Explorer for Windows always includes the bullet in the content area box. This can cause some inconsistent results when positioning list blocks or adding borders, padding, and margins to list items.

23.1.3. Make Your Own Bullets

The one juicy feature that CSS does provide for list presentation is the ability to provide an image to be used as a bullet. In the past, to use images, the list needed to be faked with line breaks or a table. Now the markup can remain semantically and structurally intact while a style sheet swaps the browser's bullet for one of your own.

To specify an image to be used as a marker, use the list-style-image property.

list-style-image

---

Values:

 <uri> | none | inherit 

Initial value:

 none 

Applies to:

Elements whose display value is list-item (in XHTML, the ul, ol, and li elements)

Inherited:

Yes

This example shows the syntax for providing the URL of an image for use as a marker. The list-style-type is set to disc as a backup in case the image doesn't display or the property can't be interpreted by the user agent. The resulting list is shown in Figure 23-3.

 ul { list-style-image: url(happy.gif);      list-style-type: disc;      list-style-position: outside; } 

Figure 23-3. Using an image as a marker

Remember that the URL is always interpreted as relative to the style sheet, whether it's embedded in the document or in an external .css file elsewhere on the server. Make sure that relative URLs are correct or use absolute URLs (including http:// and the domain) to be safe.

23.1.4. list-style Shorthand Property

The three list properties (type, position, and image) can be combined in the shorthand list-style property.

list-style

---

Values:

 [<list-style-type> || <list-style-image> || <list-style-position>] | inherit 

Initial value:

See individual properties

Applies to:

Elements whose display value is list-item (in HTML and XHTML, the ul, ol, and li elements)

Inherited:

Yes

The values for each property may be provided in any order and any may be omitted. Keep in mind that omitted properties are reset to their default values in shorthand properties. Be careful not to override list-style declarations earlier in the style sheet. Each of these examples of list-style duplicates the effects of the separate rules provided in the example shown in Figure 23-4.

 ul {list-style: url(skull.gif) disc outside;} ul {list-style: disc outside url(skull.gif);} ul {list-style: url(skull.gif) disc;} 

23.1.5. List-item Display

You may have noticed that all of the properties in this chapter apply to "elements whose display value is list-item." In XHTML, there are explicit elements for lists and list items (ol, ul, and li), but in other XML languages, that may not be the case. The CSS specification allows any element to perform like a list item, complete with marker, by setting its display property to list-item. This applies to other elements within XHTML as well, as shown here and in Figure 23-4.

 p.bulleted {     display: list-item;     list-style-type: disc;     list-style-position: inside; } <p>Aliquam pulvinar volutpat nibh. ...</p> <p>Etiam accumsan. Proin eros ...</p> <p>Aenean id nulla sed nibh accumsan ...</p> 

Figure 23-4. Using another element as a list-item