23.1. CSS for ListsBulleted 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.
23.1.1. Choosing a MarkerOrdered 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.
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 squareThe remaining value keywords specify various numbering and lettering styles. Table 23-1 lists the keyword and numbering types provided in CSS 2.1.
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.
23.1.2. Marker PositionBy 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.
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-positionUnfortunately, 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.
23.1.3. Make Your Own BulletsThe 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.
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
23.1.4. list-style Shorthand PropertyThe three list properties (type, position, and image) can be combined in the shorthand list-style property.
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 DisplayYou 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 |