User:Bartlett/13

./ ADD NAME=CH13.HTML

Hour 13. Lists

What You'll Learn in This Hour:

How lists are formatted in CSS
What the different types of lists are, and how they're coded in HTML
How other elements can be displayed as lists
Which CSS properties change the shape and appearance of bullets
How to set the counting methods of numbered lists

Not all information is organized into paragraphs of text. Many types of web content are actually lists of information, including navigation menus, product feature lists, glossaries, and step-by-step instructions. Because of the way information is read on the Web, the use of lists can be one of the most effective and direct methods of conveying information to an audience. Styling lists attractively can also enhance their usefulness.

./ ADD NAME=CH13LEV1SEC1.HTML

List Formatting

Before I discuss how CSS browsers display lists, I need to define some terms that will be important this hour.

A list is just a set of information that has been organized into discrete pieces called list items. A list can be ordered, which means that the order in which the items are presented is important, or it can be unordered, indicating that there isn't any specific order to the items or that order isn't important. A third type of list is the definition list (also called a dictionary list); these consist of pairs of shorter terms and longer explanations.

 Types of HTML Lists

Lists in HTML are usually indicated by appropriate list markup, which means they usually include a list tag such as

, and then list items marked up with

or

, and

for definition lists. It's also possible to create a list using nonlist tags, such as

or <a>, and use CSS to convert them into lists. Within a CSS context, an element is a list item if it has the display property value list-item. When that value is set, the element is treated as an

tag by the browser, no matter what the tag really is. The list-item value designates the element as a block element, except that it also allows for a list marker. A list marker is a symbol before each list item that indicates it's a list. In [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch13ex01 Listing 13.1], you can see each of the three types of HTML lists, along with a fourth "list" done without using HTML list markup. Listing 13.1. Four Lists in HTML

<!-- lists-13.1.html --><br /><html><br /><head><title>List-O-Rama</title></head><br /><body><br /><table border="0" width="100%"><br /><tr><td valign="top" width="50%"><br /><h2>Ordered List: Tallest Mountains</h2><br /><ol><li>Everest</li> <li>K2</li><br /><li>Kangchenjunga</li> <li>Lhotse</li><br /><li>Makalu</li> <li>Cho Oyu</li><br /><li>Dhaulagiri</li><br /></ol</td><br /><td valign="top" width="50%"><br /><h2>Unordered List: Flavors of Soda</h2><br /><ul><li>Peach</li><br /><li>Berry:<br /><ul><li>Raspberry</li><br /><li>Blackberry</li><br /><li>Boysenberry</li><br /></ul></li><br /><li>Orange</li> <li>Kiwi</li><br /></ul></td><br /></tr><br /><tr><td valign="top" width="50%"><br /><h2>Definition List: Common Abbreviations</h2><br /><dl> <!-- definition list --><br /><dt>CSS</dt> <dd>Cascading Style Sheets</dd><br /><dt>HTML</dt> <dd>Hypertext Markup Language</dd><br /><dt>W3C</dt> <dd>World Wide Web Consortium</dd><br /></dl></td><br /><td valign="top" width="50%"><br /><h2>Non-List: Links</h2><br /><div id="nav"> <!-- not done with list markup --><br /><a href="/">Home</a><br /><a href="info/">Info</a><br /><a href="shop/">Shop</a><br /><a href="map/">Map</a><br /><a href="contact/">Contact</a><br /></div></td><br /></tr><br /></table></body></html><br />

The four lists are shown in a browser in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch13fig01 Figure 13.1]; this HTML file will be used in the examples later this hour to illustrate how CSS can be used to style lists.

Figure 13.1. Four different lists displayed by Firefox.

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/13fig01_alt.jpg [View full size image]]

File:13fig01.jpg

 Ordered (Numbered) Lists

Browsers display an ordered list by putting a number marker of some kind before the list items. Usually number markers are ordinary numbers, such as 1, 2, 3, and so on, but later in this hour you'll learn to change those to other counting methods.

Examples of ordered lists include the top ten best-seller list at a bookstore or a set of instructions for making a cake. In both cases, the specific order of the list items is significant.

Ordered lists in HTML are created by the

tags for each list item.

Did you Know? Users with visual disabilities often find ordered lists easier to navigate than unordered lists because they have a better sense of context; the numbers can be used to keep track of location in a list. Using ordered lists on your page is very helpful to these users.

 Unordered (Bulleted) Lists

An unordered list is commonly displayed with a bullet marker. This is a symbol placed before each item of the list; it most often looks like a solid circle. During this hour you'll learn how to change the list bullet to other shapes or replace it with an image.

Unordered list examples include a list of toppings you could order on a pizza or a roster of students in a class. Even though the class roster may have an orderusually alphabetical by last namethe order probably isn't significant; it's arbitrary. For example, the list isn't ordered by the tallest or the shortest in the class. In most cases, the significance of a list's order depends on how the list is meant to be used. A list's order may not matter in one case but might in another.

To create an unordered list in HTML, you use the

tag. Two other HTML tags create bulleted lists, <dir> and <menu>, but these are deprecated in HTML 4.01, which means that you should use the

and

tags inside it. A definition list doesn't have to be a glossary. Although that's a common use, it could be anything from a listing of features in a car to a menu of desserts that describes each treat. A definition list can be used whenever you have pairs of shorter text and longer explanations or descriptions of that text. Unlike the

tags in

and

tags do not have the property display set to list-item. Instead, they have the display value of block, although the

tag usually has an extra margin-left value of 1.33em.

Watch Out! Sometimes web developers use the

tags to create indented texts or margins. Using structural tags, such as the list elements, for presentational effects such as margins reduces the separation of content from presentation. To create margin effects, use the CSS properties in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch16.html#ch16 Hour 16], "Borders and Boxes," not list markup.

 Changing List Type with display

Using the CSS display property, you can override the default presentation of a tag and create a list from nonlist elements or change a list into a nonlist.

If you change the value of the display property, it changes only how it's presented block or inlineand in the case of the list-item value, it sets aside space for a marker. Changing the display property doesn't affect any other values, such as the inherent margin-left on

. Examples of setting display properties can be seen in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch13ex02 Listing 13.2], a style sheet to change the appearance of your HTML lists. Notice that I set margin-left values to remove the left margins when changing the display value to block, and I add margin-left when setting display: list-item. Listing 13.2. Several Lists with Type Changed

/* lists-13.2.css */<br />ul li { display: inline; }<br /><br />ol { margin-left: 0px; }<br />ol li { display: block; }<br /><br />dt { display: list-item;<br />margin-left: 1em; }<br /><br />dd { display: list-item;<br />margin-left: 2em; }<br /><br />div#nav a { text-decoration: none;<br />margin-left: 2em;<br />display: list-item; }<br />

The effects of this style sheet can be seen in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch13fig02 Figure 13.2], which applies the style sheet to the HTML lists from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch13ex01 Listing 13.1]. The Unordered List is jumbled, there are no number markers for the Ordered List, and there are new list markers before the Definition List and Non-List items. Because the type of list marker is not set, the exact marker used varies from browser to browser, depending on what the browser chooses to use for a default; your browser may show some of the lists differently than in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch13fig02 Figure 13.2]. To ensure consistency across browsers, you should set the list item properties described later this hour whenever you change the display of an element to list-item.

Figure 13.2. Displaying alternate list formatting.

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/13fig02_alt.jpg [View full size image]]

File:13fig02.jpg

 The list-style-type Property

You can change the type of list marker by using the list-style-type property. This property is used only on elements that have the display value of list-item, but it can be set on any tag, and the value is inherited by children that are list items. Most commonly, it's set on the

list items; this way you can set different styles for each list. The most common values for list-style-type are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch13table01 Table 13.1]. The default value for

decimal

disc

display: list-item

disc

Value	Effect
`circle`	A hollow circle bullet
`decimal`	Decimal number markers (1, 2, 3, ...)
`decimal-leading-zero`	Decimal number markers with leading zeros (01, 02, 03, ...)
`disc`	A solid circle bullet
`lower-alpha`	Lowercase alphanumeric markers (a, b, c, ...)
`lower-roman`	Lowercase roman number markers (i, ii, iii, ...)
`none`	Don't display any marker before the list
`square`	A square bullet
`upper-alpha`	Uppercase alphanumeric markers (A, B, C, ...)
`upper-roman`	Uppercase roman number markers (I, II, III, ...)
`inherit`	Use the value of `list-style-type` from the containing box

There are two types of values: those that set bullet markers and those that set number markers. It is possible to set a bullet list-style-type for ordered lists or to set a number marker on unordered list, but generally speaking, this should be avoided. As a rule of thumb, you should use number markers only with ordered lists, and bullet markers only with unordered lists.

disc

circle

square

list-style-type

ol { list-style-type: upper-roman; }
ol ol { list-style-type: upper-alpha; }
ol ol ol { list-style-type: decimal; }
ol ol ol ol { list-style-type: lower-alpha; }
ol ol ol ol ol { list-style-type: lower-roman; }

A style sheet that changes list markers is shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch13ex03 Listing 13.3].

Listing 13.3. Setting the list-style-type in CSS

/* lists-13.3.css */<br /><br />ol { list-style-type: upper-roman; }<br /><br />ul { list-style-type: square; }<br />ul ul { list-style-type: circle; }<br /><br />#nav a { display: list-item;<br />margin-left: 2em;<br />list-style-type: square; }<br />

The results of applying this style sheet to your sample lists are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch13fig03 Figure 13.3].

Figure 13.3. Lists with different marker types.

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/13fig03_alt.jpg [View full size image]]

File:13fig03.jpg

By the Way

Markers (bullet or number) are displayed with the same font characteristic as the list item. If you want to change a propertyfor example, the colorset the property on the list item, and then use a or other inline element to change the text, as in the following:

<ol>
 <li><span class="person">Nick Mamatas</span></li>
</ol>

To change the color of the list marker but not the list text, write rules like these, which put the number in red:

ol { color: black; }
ol li { color: red; }
ol li span.person { color: black; }

 International List Markers

You can set the list marker to count using Roman numerals, numbers, or letters, but what about languages that don't use the same alphabet? A list of additional values for the list-style-type property is shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch13table02 Table 13.2].

Value	Effect
`armenian`	Traditional Armenian numbers
`cjk-ideographic`	Ideographic numbers (Asian languages)
`georgian`	Traditional Georgian numbers
`hebrew`	Traditional Hebrew numbers
`hiragana`	Japanese hiragana numbers
`hiragana-iroha`	Japanese hiragana-iroha numbers
`katakana`	Japanese katakana numbers
`katakana-iroha`	Japanese katakana-iroha numbers
`lower-greek`	Lowercase Greek letters

The :lang() pseudo-selector, described in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch08.html#ch08 Hour 8], "Advanced Selectors," can be used in conjunction with these list-style-type values; or you could use a normal element selector, a class or id selector, or anything else that fits your markup. Here are two examples:

li:lang(jp) { list-style-type: hiragana; }
ul.alphabeta { list-style-type: lower-greek; }

Watch Out! These are supported only for those browsers and operating systems that support these character sets and appropriate fonts. This is highly dependent upon the specific version and language support on each computer. Although you should feel free to use these with content in the appropriate language, you should also expect that browsers without support for such a given language will display these as list-style-type: decimal.

Try it Yourself: Styling Your To-Do List

If you're like many people, you probably keep a list of what you need to get done. You can organize your life and practice your new CSS skills by following along:

1.	First, create a list in an HTML page of the items you need to complete. Use standard list markupthe tag is probably most appropriate, so that you can prioritize your list.
2.	Add a style rule, on a linked style sheet or in a `<style>` section of the `<head>`, that sets the `list-style-type` property.
3.	Experiment with different list types. Does your list look better with letters, numbers, or Roman numerals?
>	>
4.	Try it with a circle, disk, and square as list markers. Which is best for checking off completed items when you print out the list?

The list-style-image Property

You aren't restricted to bullets that are circles or squares; you can actually use any image you like by using the list-style-image property. Naturally, you'll want to use only small images that can function as bullets for this purpose; images that are too large overwhelm the text. As an approximate rule, you should use bullets that are between 12 and 20 pixels in size.

I created a simple one-bullet image in a graphics program by first creating a 16-pixel by 16-pixel blank image, then drawing a black circle, and then adding a yellow plus sign in the middle of it; this is shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch13fig04 Figure 13.4].

Figure 13.4. Creating a simple list bullet image.

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/13fig04_alt.jpg [View full size image]]

File:13fig04.jpg

To use this image as a bullet, I simply need to set the list-style-image property in a rule, as in the following:

selector { list-style-image: url("graphic");

An example of a style sheet that uses bullet images is shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch13ex04 Listing 13.4]. Notice that I also set the list-style-type property to circle; if the image can't be loaded for any reason, the circle is displayed instead.

Listing 13.4. Setting a list-style-image

/* lists-13.4.css */<br />ol { list-style-type: upper-roman; }<br />ul { list-style-type: square;<br />list-style-image: url("yellowplus.gif"); }<br />ul ul { list-style-type: circle; }<br />/* This will inherit the list-style-image above */<br />#nav a { display: list-item;<br />margin-left: 2em;<br />list-style-type: square;<br />list-style-image: url("yellowplus.gif"); }<br />

Applying this style sheet to the sample lists gives the results in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch13fig05 Figure 13.5].

Figure 13.5. Bullet images marking lists.

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/13fig05_alt.jpg [View full size image]]

File:13fig05.jpg

 The list-style-position Property

When a bullet or number marker is placed, it's normally located outside the main content to the left of the list element's box. A virtual marker box is created; the box inherits the text properties of the list item, although the background is always transparent.

The browser determines the placement of this virtual marker box; as a web developer, you can't affect the exact placement of the marker. You can control one thing, though: You can move the marker box inside the list element's box, so it functions as an inline box instead. You do this by setting the list-style-position property.

list-style-position: outside

inside

inherit

list-style-position

border

/* lists-13.5.css */<br /><br />ol { list-style-type: upper-roman;<br />list-style-position: inside; }<br /><br />li { border: 1px solid black; margin: 2px; }<br />ul { list-style-type: square;<br />list-style-image: url("yellowplus.gif");<br />list-style-position: outside; }<br />ul ul { list-style-type: circle;<br />list-style-position: inside; }<br /><br />#nav a { display: list-item;<br />list-style-position: inside;<br />list-style-type: square;<br />list-style-image: url("yellowplus.gif");<br />border: 1px solid black; margin: 2px; }<br />

The repositioned markers are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch13fig06 Figure 13.6].

Figure 13.6. List positioning shown by outline boxes.

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/13fig06_alt.jpg [View full size image]]

File:13fig06.jpg

 The list-style Shorthand Property

Like other shorthand properties, the list-style property lets you set multiple CSS properties at once. A list-style rule is written like the following:

selector { list-style: type position image; }

The values for type, position, and image can appear in any order; any values that aren't specified are set to their default values. For example, to set the image to yellowplus.gif, the bullet type to square, and the position to inside, you can use the following rule:

ul li {
 list-style: url("yellowplus.gif") square inside;
}

Try it Yourself: Further To-Do List Styling

Let's apply what you've learned to further enhance your list of items that need to be done:

1.	If you haven't done so already, create an HTML file with your to-do list in an ordered list ( ).
2.	For each item, set a `class` attributeeither `pending` or `done`.
3.	Create two separate graphics, or download them from the Web, to represent `pending` and `done`. I like a simple empty square box for `pending`, and the same box with a check mark for `done`.
4.	Set a `list-style` rule that uses your graphics. Be sure to include default values for the marker type if the graphic isn't available, and adjust the location if you need to.
5.	Load your HTML page in a web browser and change the style rules until you're happy. You can add additional rules that aren't related to `list-style` properties, of course: Do you want to put pending items in bold, or use a strikethrough text effect on completed items? It's your to-do liststyle it the way you'd like!

./ ADD NAME=CH13LEV1SEC2.HTML

Summary

HTML defines three types of lists: ordered lists, unordered lists, and definition lists. Ordered and unordered lists contain list-item elements, which are a special type of block content.

Any HTML element with the CSS property display set to list-itemincluding

tags, thanks to browsers' default style sheetswill generate a virtual marker box. This marker box contains a marker of some kind; ordered lists have number markers and unordered lists have bullets. The type of marker can be set with the list-style-type property; a variety of number schemes and bullet types are available. Bullet images can also be used with the list-style-image property. The location of the marker box is set with the list-style-location property. All these properties can be set at once with the list-style shorthand property. ./ ADD NAME=CH13LEV1SEC3.HTML Workshop The workshop contains a Q&A section, quiz questions, and activities to help reinforce what you've learned in this hour. If you get stuck, the answers to the quiz can be found after the questions. Q&A

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch13qa1q1a1 Q.]	How do I set styles on definition lists? You've mostly talked about and , not .
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch13qa1q1 A.]	That's because from the CSS perspective, definition lists aren't lists at all! They're simply `block` content, not `list-item` elements. That means that you can just create style rules for , , and normally, as you would for any block elements. I personally like to do the following: dt { font-weight: bold; }<br />
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch13qa1q2a2 Q.]	How do I use CSS to set the starting values for ordered lists?
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch13qa1q2 A.]	Unfortunately, you can't set those with CSS. To set specific number values for ordered lists, you need to use the HTML `start` attribute on the element or the `value` attribute on . Both these values are deprecated in HTML 4.01, which means you can't use them in Strict HTML documents.

Quiz

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch13qa2q1a1 1.]	Which of these rules will make an ordered list count in lower-case letters? # `ol { list-style-type: alphabet; }` `ol { list-style-type: lower-case; }` `ol { list-style-type: lower-letters; }` `ol { list-style-type: lower-alpha; }`
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch13qa2q2a2 2.]	Assuming the following style rules, what color will the numbers before a list item be? ol { color: green; }<br />ol li { color: blue; }<br />li { color: black; }<br />ol li span { color: red; }<br />
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch13qa2q3a3 3.]	You want your bullet list items to be marked by a graphic, `bullet01.jpg`, which looks like a small box. You also want the graphic to be placed inside the list item's display box. How do you write this with the `list-style` shorthand property?

Answers

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch13qa2q1 1.]	The correct answer is (d); the `lower-alpha` value orders list items with a, b, c, and so on.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch13qa2q2 2.]	The numbers will be the same color as the ; in this case, that color is `blue`. (If you think it's `black`, you're forgetting that the second rule is more specific than the first in cascade order.)
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch13qa2q3 3.]	Here's one way to write such a rule: ul { list-style: square inside url("bullet01.jpg"); }<br />

Exercises

Some projects you can undertake to investigate list styles on your own include the following:

Build an outline using
1. Design several list bullet graphics for your web pages, and add these using the list-style-image property. Which kinds of bullets are best at capturing the user's attention?
2. Create a navigation bar on a web page, consisting of <a> links not grouped in a list. Use display: list-item to change the <a> links to a list, then add two types of list bulletsone for unvisited links, one for visited links.

./ ADD NAME=CH14.HTML