CSS ul

The simplest way to format your lists is to define a style which applies to all lists in the page. In the head of your web page, add the following code:

<style type="text/css">
ul { list-style-image: url("/images/arrow.gif") }
</style>

Syntax: list-style-type: <value>
Possible Values: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none

Initial Value: disc
Applies to: Elements with display value list-item

Inherited: Yes

specifies the type of list-item marker, and is used if list-style-image is none or if image loading is turned off

Syntax: list-style-image: <value>
Possible Values: <url> | none

Initial Value: one
Applies to: Elements with display value list-item

Inherited: Yes
replaces the marker specified in the list-style-type property.

Syntax: list-style-position: <value>
Possible Values: inside | outside
Initial Value: outside
Applies to: Elements with display value list-item
Inherited: Yes

takes the value inside or outside, with outside being the default. This property determines where the marker is placed in regard to the list item. If the value inside is used, the lines will wrap under the marker instead of being indented.

Example:

<style type="text/css">
ul {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: 2em;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #00CC33;
text-decoration: none;
background-color: #CCCCCC;
text-indent: 5px;
list-style-position: outside;
list-style-image: url(arrow.gif);
list-style-type: square;
padding: 6px;
margin: 2px;
}
</style>