Adobe Dreamweaver CS3

Formatting Lists with CSS

Cascading Style Sheets will ensure that all of your list types, styles, bullet images, and item positions are created in a uniform manner.

When defining a list type, there are two options to choose from: a numbered list, which is classified as an ordered list (<ol>), and a bulleted list, which is classified as an unordered list (<ul>). The style options available will vary depending on the list type selected.

This document will use the example of creating a style for a bulleted list (<ul>).

From the CSS tab, click NEW CSS RULE
The New CSS Rule dialog box appears.
For Selector Type, select Tag
From the Tag pull-down list, select the appropriate tag for your list (e.g., ul or ol)
EXAMPLE: Select ul
To create an external CSS file (.css), for Define in, select New Style Sheet File
To create an internal or embedded style sheet, select This document only
NOTES:
You are able to link an external CSS file to several documents. For more information about linking external style sheets refer to Using the CSS Styles Tab.
An embedded style sheet is located in the <head> section of the document it was created for. The style settings for that style sheet apply only to that document.
Click OK
The CSS Rule Definition dialog box appears.
From the Category list, select List
From the Type pull-down list, select a desired list style
EXAMPLE: Select square
NOTE: List style options will vary depending on the type of list that was declared in the New CSS Rule dialog box.
OPTIONAL: To use an image from your files for the bullets,
1. Click BROWSE...
  The Select Image Source dialog box appears.
2. Using the Look in pull-down list, navigate to and select the image
3. Click OK
OPTIONAL: From the Position pull-down list, select inside or outside
EXAMPLE: Select inside
NOTE: Inside will wrap the list item to the left margin, Outside will wrap the list item and indent it.
To test the results, click APPLY
To cancel the changes, click CANCEL
To accept the changes, click OK