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

By Joe Burns

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>.

© Copyright Macmillan Computer Publishing. All rights reserved.

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •