This topic has not yet been rated - Rate this topic

Lists, Style Builder Dialog Box

Visual Studio 2008

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

Open your HTML document in Design view of the HTML Designer and select the elements to format.
Click Style on the Format menu to open the Style Builder dialog box.
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

Open an existing external style sheet and place the insertion point within the curly braces ({ }) that follow the selector for the desired style.
Click Build Style on the Styles menu to open the Style Builder dialog box.
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

Did you find this helpful? Yes No

Not accurate

Not enough depth

Need more code examples

(1500 characters remaining)

Community Additions

ADD

Lists, Style Builder Dialog Box

To apply list attributes directly to HTML elements on your page

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

Lists

Bullets

Concepts

Reference

Other Resources

Community Additions