Special Edition Using HTML 4: -- Cascading Style Sheet Property Reference
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>. |
© Copyright Macmillan Computer Publishing. All
rights reserved.
