Section 6.5. Styling Lists | Dreamweaver CS3: The Missing Manual

6.5. Styling Lists

The <ul> and <ol> tags create bulleted and numbered lists, like lists of related items or numbered steps. But you don't always want to settle for the way Web browsers automatically format those lists. You may want to swap in a more attractive bullet, use letters instead of numbers, or even completely eliminate the bullets or numbers .

6.5.1. Types of Lists

Most Web browsers display unordered lists (<ul> tags) using round bullets, and numbered lists (<ol> tags) using well numbers. With CSS, you can choose from among three types of bullets disc (a solid round bullet), circle (a hollow round bullet), or square (a solid square). There are also six different numbering schemes decimal, decimal-leading-zero, upper-alpha, lower-alpha, upper-roman , or lower-roman (see Figure 6-8). You select all these options using the list-style-type property, like so:

Figure 6-7. The :first-letter pseudo element formats the first letter of the styled element, like the "initial caps" to the left.
The :first-line selector, on the other hand, styles the first line of a paragraph. Even if your guest resizes the window (bottom), the browser still styles every word that appears on a paragraph's first line.

 list-style-type: square;

 list-style-type: upper-alpha;

Figure 6-8. Many Web browsers display the decimal and decimal-leading-zero options identically. Firefox and other Mozilla-based browsers like Camino (pictured here) correctly display the decimal-leading-zero setting by adding a 0 before single digit-numbers01, for example.

Tip: If you feel like rushing a fraternity or sorority, you can also replace numbers with Greek letters±, ², ³using the lower-greek option.

Most of the time, you use this property on a style that's formatting an <ol> or <ul> tag. Typical examples include an ol or ul tag style ul { list-style-type: square; } or a class you're applying to one of those tags. However, you can also apply the property to an individual list item (<li> tag) as well. You can even apply different types of bullet styles to items within the same list. For example, you can create a style for a <ul> tag that sets the bullets to square , but then create a class named .circle that changes the bullet type to circle , like this:

 .circle { list-style-type: circle; }

You can then apply the class to every other item in the list to create an alternating pattern of square and circular bullets:

 <ul> <li>Item 1</li> <li class="circle">Item 2</li> <li>Item 3</li> <li class="circle">Item 4</li> </ul>

At times you'll want to completely hide bullets, like when you'd rather use your own graphic bullets (Section 6.5.3). Also, when a site's navigation bar is a list of links, you can use an <ul> list, but hide its bullets (see the example in Section 9.1.1). To turn off the bullets, use the keyword none :

 list-style-type: none;

6.5.2. Positioning Bullets and Numbers

Web browsers usually display bullets or numbers hanging to the left of the list item's text (Figure 6-9, left). With CSS, you can control the position of the bullet (somewhat) using the list-style-position property. You can either have the bullet appear outside of the text (the way browsers normally display bullets) or inside the text block itself (Figure 6-9, right):

 list-style-position: outside;

 list-style-position: inside;

Figure 6-9. Using the list-style-position property, you can control the position of bullets and numbers in a list. The outside option (left) emphasizes the "listness" of your list. Use the inside option (right) if you need to maximize the width of your list.

Tip: You can adjust the space between the bullet and its textincrease or decrease that gapby using the padding-left property (see Section 7.2). To use it, you create a style that applies to the <li> tags. This technique works only if you set the list-style-position property to the outside option (or don't use list-style-position at all).

In addition, if you don't like how Web browsers indent a list from the left edge, then you can remove that space by setting both the margin-left and padding-left properties to 0 for the list. To remove the indent from all lists, you could create this group selector:

 ul, ol {       padding-left: 0;       margin-left: 0; }

Or, you could create a class style with those properties and apply it to a particular <ul> or <ol> tag. The reason you need to set both the padding and margin properties is because some browsers use padding (Firefox, Mozilla, Safari) and some use margin (Internet Explorer) to control the indent. (You'll learn more about the margin and padding properties in the next chapter.)

Browsers normally display one bulleted item directly above another, but you can add space between list items using the margin-top or margin-bottom properties on the particular list items. These properties work for spacing list items exactly as for spacing paragraphs, as explained in Section 6.4.3.2. You just need to make sure that the style applies to the <li> tags by creating a class style and applying it individually to each <li> tag. Or, better yet, create an <li> tag style or descendent selector. The style should not apply to the <ul> or <ol> tag. Adding margins to the top or bottom of those tags simply increases the space between the list and the paragraphs above or below itnot the space between each item in the list.

6.5.3. Graphic Bullets

If you're not happy with squares and circles for your bullets, create your own. Using an image-editing program like Photoshop or Fireworks, you can quickly create colorful and interesting bullets. Clip art collections and most symbol fonts (like Webdings) provide great inspiration.

Tip: You can also find many examples of bullets on the Web. Go to www.stylegala.com/features/bulletmadness/ to find over 200 free bullet icons.

The CSS list-style-image property lets you specify a path to a graphic on your site, much as you'd specify a file when adding an image to a page using the src attribute of the HTML <img> tag. You use the property like this:

 list-style-image: url(/books/2/835/1/html/2/images/bullet.gif);

The term url and the parentheses are required. The part inside the parentheses images/bullet.gif in this exampleis the path to the graphic. Notice that, unlike HTML, you don't use quotation marks around the path.

FREQUENTLY ASKED QUESTION
Customizing List Bullets and Numbers

I'd like the numbers in my numbered lists to be bold and red instead of boring old black. How do I customize bullets and numbers ?

CSS gives you a few ways to customize the markers that appear before list items. For bullets, you can use your own graphics as described in Section 6.5.3. You have two other techniques available: one that's labor intensive , but works on most browsers, and one that's super geeky , cuttingedge, and doesn't work on Internet Explorer 6 for Windows or earlier.

First, the labor-intensive way. Say you want the numbers in an ordered list to be red and bold, but the text to be plain, unbolded black. Create a style that applies to the listlike a class style you apply to the <ol> or <li> tagswith a text color of red, and the font weight set to bold. At this point, everything in the listtext includedis red and bold

Next, create a class style .regularList , for examplethat sets the font color to black and font weight to normal (that is, not bold). Then (and this is the tedious part), wrap a <span> tag around the text in each list item and apply the class style to it. For example: <li><span class="regularList">Item 1</span></li> . Now the bullets are bold and red and the text is black and normal. Unfortunately, you have to add that <span> to every list item!

The cool, "I'm so CSS-savvy," way is to use what's called generated content . Basically, generated content's just stuff that isn't actually typed on the page, but is added by the Web browser when it displays the page. A good example is bullets themselves . You don't type bullet characters when you create a list; the browser adds them for you. With CSS, you can have a browser add content and even style that content, before each <li> tag. For an introduction to generated content, visit www.richinstyle.com/guides/generated2.html. The official (read: technical and confusing description) is at www.w3.org/TR/REC-CSS2/generate.html.

Note: When specifying a graphic in an external style sheet, the path to the image is relative to the style sheet file, not the Web page. You'll learn more about how this works in Section 8.2, as you start to use images with CSS.

While the list-style-image property lets you use a graphic for a bullet, it doesn't provide any control over its placement. The bullet may appear too far above or below the line, requiring you to tweak the bullet graphic until you get it just right. A better approachone you'll learn in Chapter 8is to use the background-image property. That property lets you very accurately place a graphic for your bulleted lists.

Tip: As with the font property (see the box in Section 6.4.3), there's a shorthand method of specifying list properties. The list-style property can include a value for each of the other list propertieslist-style-image, list-style-position, and list-style-type. For example, ul { list-style: circle inside; } would format unordered lists with the hollow circle bullet on the inside position. When you include both a style type and style image list-style: circle url(/books/2/835/1/html/2/images/bullet.gif) inside ;Web browsers use the style type circle in this exampleif the graphic can't be found.