Lists, Style Builder Dialog Box

  • Article

The Lists page of the Style Builder dialog box makes it possible for you to define 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, open your HTML document in Design view of the HTML Designer and select the elements to format. Then choose Build Style from the Format menu to open the Style Builder dialog box, and select the Lists option in the left pane.

Note   On the Format menu, the Build Style option becomes available when you open an HTML document in Design view and set its targetSchema property to a Web browser that supports HTML 4.0 or later and CSS styles.

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, place the cursor within the curly braces that follow the selector for the desired style. Then choose Build Style from the Styles menu to open the Style Builder dialog box, and select the Lists option in the left 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 cursor 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> 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:

Lists

Sets attributes for the type of list, that is, either bulleted or unbulleted. The attributes generally apply to styles that affect an <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 following attributes 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 and select None as the Custom Bullet option, the following CSS markup is inserted:

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

See Also

Introduction to Cascading Style Sheets | Working With CSS Styles | 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 | Other, Style Builder Dialog Box | Color Picker Dialog Box