Email Article

Special Edition Using HTML 4: -- Cascading Style Sheet Property Reference

from Special Edition Using HTML 4:
Cascading Style Sheet Property Reference
by Jerry Honeycutt

Classification Properties

You use the list properties to specify how lists display in the browser window. You can change the position of the marker (list-style-position) and the style or image used for the marker (list-style-type and list-style-image). The sections that follow describe each property in more detail. Enjoy.

The list properties are inherited, so if you define a property for the <UL> tag, all its enclosed <LI> tags inherit those properties. These tags are only meaningful for HTML list tags.

You can group the list properties using list-style. You specify the marker type, marker image, and position, like this:

list-style: square URL(http://www.myserver.com/images/marker.gif) inside

list-style-image

You use the list-style-image property to specify an image that the browser will display as the marker for a list item. The property's only value is the URL, using the URL(address) format, of the image to use as the marker, like this:

list-style-image: url(http://www.myserver.com/images/marker.gif)

To affect all the items within a list, set this property for the list container, such as <UL> as opposed to the list item <LI>. You can override an individual list item, however, by setting this property in a single occurrence of the <LI> tag.

list-style-position

The list-style-position property determines the relative position of the marker. Table B.8 describes the possible values you can assign to this property.

Table B.8 list-style-position Values

Value	Description
`Inside`	The list item's text wraps to the next line underneath the marker.
`Outside`	The list item's text wraps to the next line underneath the start of the text on the previous line (hanging indent).

list-style-type

You use the list-style-type property to specify the type of marker the browser will display. Use this instead of a marker image. Table B.9 describes each of the possible values you can assign to this property.

Table B.9 list-style-type Values

Value	Description
`disc`	Disc
`circle`	Circle
`square`	Square
`decimal`	Numbered (1, 2, 3, ...)
`lower-roman`	Lowercase roman numerals (i, ii, iii, ...)
`upper-roman`	Uppercase roman numerals (I, II, III, ...)
`lower-alpha`	Lowercase alphabet (a, b, c, ...)
`upper-alpha`	Uppercase alphabet (A, B, C, ...)
`none`	No markers

white-space

The white-space property defines how the browser handles white space within the element. You can leave things alone and let the browser collapse all the white space, or you can specify that the browser treat white space as if you're within a <PRE> container. Table B.10 shows you the values you can assign to this property.

Table B.10 white-space Values

Value	Description
`normal`	White space is collapsed.
`pre`	Handle white space like the `<PRE>` tag.
`nowrap`	Wrapping is only permitted with `<BR>`.