This browser does not support basic Web standards, preventing the display of our site's intended design. May we suggest that you upgrade your browser?

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

  1. From the CSS tab, click NEW CSS RULEnew style sheet
    The New CSS Rule dialog box appears.
    New CSS Rule dialog box

  2. For Selector Type, select Tag

  3. From the Tag pull-down list, select the appropriate tag for your list (e.g., ul or ol)
    EXAMPLE: Select ul

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

  5. Click OK
    The CSS Rule Definition dialog box appears.
    CSS Rule Definition dialog box

  6. From the Category list, select List

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

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

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

  10. To test the results, click APPLY
    To cancel the changes, click CANCEL
    To accept the changes, click OK

Excellence. Our Measure. Our Motto. Our Goal.