Lists, Style Builder Dialog Box

  • Article

The Lists page of the Style Builder dialog box makes it possible for you to define cascading style sheet (CSS) style attributes that format lists created using the <OL> and <UL> tags. You can apply these attributes directly to HTML elements, or you can add them to CSS style rules.

To apply list attributes directly to HTML elements on your page

  1. Open your HTML document in Design view of the HTML Designer and select the elements to format.

  2. Click Style on the Format menu to open the Style Builder dialog box.

  3. Click Lists in the left pane of the Style Builder dialog box.

    The Lists, Style Builder dialog box appears in the right pane.

When you format elements selected in Design view, CSS style attributes are inserted inline into the HTML markup for your page. Switch to HTML view to review the new style attributes inserted.

To add list attributes to a CSS style rule defined in an external style sheet

  1. Open an existing external style sheet and place the insertion point within the curly braces ({ }) that follow the selector for the desired style.

  2. Click Build Style on the Styles menu to open the Style Builder dialog box.

  3. Click Lists in the left pane of the Style Builder dialog box.

    The Lists, Style Builder dialog box appears in the right pane.

Note

The Styles menu appears when you open an external CSS style sheet for editing. On the Styles menu, the Build Style option becomes available when you place the insertion point within the curly braces that follow the selector for a style rule.

A CSS style class defined in an external style sheet can be applied to an element within the <BODY> element of a Web page by assigning the CSS style selector as the CLASS property for the element.

Options available on the Lists page of the Style Builder dialog box include the following.

Tasks

UI Elements

Lists

Sets attributes for the type of list, either bulleted or without bullets. The attributes generally apply to styles that affect <LI></LI> or <OL></OL> tags. Select <Not Set> (no option chosen), Bulleted, or Unbulleted. For example, if you select Unbulleted, the following code is added:

LIST-STYLE-TYPE:none

Bullets

The attributes listed in the following table format bullets. Bullets include numbers, letters, Roman numerals, standard bullet images (Circle, Disc, Square), or custom bullet images.

Note

Different styles for bullets become available after you select Bulleted as the list type.

  • Style
    Sets attributes that control the style of the bullet. Eight styles are available. Select from <Not Set> (no option chosen), Circle, Disc, Square, (1 2 3 4…), (i ii iii iv…), (I II III IV…), (a b c d...), or (A B C D…). For example, if you select Bulleted as list type and Square as the style, the following CSS markup is inserted:

    LIST-STYLE-TYPE:square

  • Position
    Sets attributes that control the position of the bullet relative to text. Two different formats for the text position are included. Select either <Not Set> (no option chosen), Outside (Text is indented in), or Inside (Text is not indented). For example, if you select Square as the style, Bulleted as the list type, and Outside (Text is indented in) as the position, the following CSS markup is inserted:

    LIST-STYLE-TYPE:square; list-style-position:outside

  • Custom Bullet
    Sets an image, rather than the eight available styles, as the bullet style. After you select Custom Bullet, the Image and None options are available.

  • Image
    Sets an image as a bullet style. Type a path and image name in the field or choose the ellipsis button (...) to open the Select Bullet Image dialog box and then browse to the location of an image. For example, if you select Bulleted as the list type, Outside (Text is indented in) as the position, and Custom Bullet as the bullet style ,and then type bullet.jpg in the Image field, the following CSS markup is inserted:

    LIST-STYLE-POSITION:outside

    LIST-STYLE-IMAGE:url (bullet.jpg)

  • None
    Sets the image value for the bullet style to None. For example, if you select Bulleted as the list type, Outside (Text is indented in) as the position, and Custom Bullet as the bullet style, and then type bullet.jpg in the Image field, the following CSS markup is inserted:

    LIST-STYLE-POSITION:outside; LIST-STYLE-IMAGE:url (bullet.jpg)

    If you subsequently return to the Style Builder dialog box and select None as the Custom Bullet option, the following CSS markup is inserted:

    LIST-STYLE-POSITION:outside; LIST-STYLE-IMAGE:none

See Also

Reference

Background, Style Builder Dialog Box

Font, Style Builder Dialog Box

Text, Style Builder Dialog Box

Position, Style Builder Dialog Box

Layout, Style Builder Dialog Box

Edges, Style Builder Dialog Box

Color Picker Dialog Box

Concepts

Working with CSS Overview

Other Resources

Other, Style Builder Dialog Box