List Properties

In Appendix A, you learned the basics of numbered and unnumbered lists. In this section, you'll learn some of the styles that can be applied to those list elements. The first item has to do with the overall display, and indeed it is called display.

• display. This property defines whether an element should be displayed inline, as a block element, as a list-item, or not at all. For example:

   ul {display: block;} li {display: list-item;} .hidden {display: none;} 

  An element defined with an inline display will be placed on the same line as the preceding element, whereas an element defined with a block display will show up as a new chunk of content next the preceding element. The list-item and none display values are easily understood: The former places some sort of marker before the item and the latter does not display the content at all.

• list-style-type. When using a list-item display value, you may also use the list-style-type to define the marker that will be placed in front of the list item. For example, the following rule states that content surrounded by the <li></li> tag pair will be displayed as a list with each line preceded by a circle:

   li {        display: list-item;        list-style-type: circle; } 

  Other values for the list-style-type property are disc, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, and none.

• list-style-image. Suppose that you don't want your list items to have the standard disc, circle, number, or letter at the beginning of the line. No problem: The list-style-image property enables you to specify an image using url() notation. For example:

   li {        display: list-item;        list-style-image: url("myArrow.gif"); } 

• list-style-position. What happens when you have a lovely bulleted list but your lines are too long and the content must wrap? Does the second line begin at the start of the element, or does it indent and begin directly beneath the first line? The list-style-position enables you to control the placement of wrapped text in list items, using inside and outside as the available values.

   li {        display: list-item;        list-style-type: square;        list-style-position: inside; } 

  In the preceding definition, long lines of text within the list item will wrap under the marker and will indent to the position of the line above it. If you were using the outside value, the line would wrap under the marker but would not be indented.

• list-style. Just as with all the font-* properties, you can combine all the list-style-* properties into one definition. The syntax is

   list-style: type position image; 

  For instance:

   list-style: outside url("myArrow.gif"); 

  or

   list-style: square inside;