Foundation HTML5 with CSS3

Constructing Content

Figure 4-40. Unordered lists now appear with a small square marking each item

If you like, the declaration list-style-type: none; will disable the item markers entirely without

affecting the format of the list.

Using an Image As a List Marker

If none of the standard list markers quite satisfies your creative desires, you can provide your own graphic

to use via the list-style-image property, as shown in Listing 4-53.

Listing 4-53. Using the list-style-image property

ul {

list-style-image: url("images/bullet.png");

}

The property’s value is the URL of the file’s location, denoted by the url keyword with the URL itself

contained in parentheses—the quotation marks are optional. The URL can be either absolute or relative

(you learned about absolute and relative URLs in Chapter 1). As you see in Figure 4-41, a browser will

load that image file in place of its standard bullet.

Figure 4-41. The image now appears next to each list item.

Images used for list markers should be small and certainly no taller than the text size. Large images might

push your list items apart to make room, as you can see in Figure 4-42.

Figure 4-42. The list items are forced apart by a large image