Edges, Style Builder Dialog Box

  • Article

The Edges page of the Style Builder dialog box makes it possible for you to define cascading style sheet (CSS) style attributes that determine the border and margins for the area surrounding an HTML element. You can either apply these attributes directly to HTML elements, or add them to CSS style rules.

To apply edges attributes directly to an HTML element on your page

  1. Open your HTML document in Design view of the HTML Designer and use the Document Outline window to select an element to format.

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

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

    The Edges, 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 CSS style attributes inserted.

To add edge attributes to a CSS style 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 Edges in the left pane of the Style Builder dialog box.

    The Edges, 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 most elements 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 Margins page of the Style Builder dialog box include the following.

Tasks

UI Elements

Margins

Sets attributes that control the distance between the rectangular area that surrounds an element and other elements. Enter values in one or more of the fields (Top, Bottom, Left, or Right) and select a unit option: px (default), pt, pc, mm, cm, in, em, ex, or %. For example, if you enter 50 in the Top and Bottom fields and then accept the default unit option, the following CSS markup is inserted:

MARGIN-TOP: 50px; margin-bottom:50px

Note

Margin values can be either positive or negative.

Padding

Sets attributes that control the amount of space between an element and its margin or between an element and its border if the object has a border. Enter values in one or more of the fields (Top, Bottom, Left, or Right) and select a unit option: px (default), pt, pc, mm, cm, in, em, ex, or %. For example, if you enter 50 in the Top and Bottom fields and accept the default unit option, the following CSS markup is inserted:

PADDING-TOP: 50px; PADDING-BOTTOM:50px

Note

Padding values must be positive.

Borders

The following attributes control the border of the rectangular area that surrounds an element.

  • Select the edge to be changed
    Sets the border edge to be formatted. Select All, Top, Bottom, Left, or Right. Code is not added to the style until you select a border style.

  • Style
    Sets the style to apply to the specified border. Select <Not Set>, None, Solid Line, Double Line, Groove, Ridge, Inset, or Outset. For example, if you select Top as the selected edge and Solid Line as the style, the following code is added:

    BORDER-TOP-STYLE:solid

  • Width
    Sets the width of the specified border. Select <Not Set> (no option chosen), Thin, Medium, Thick, or Custom. If you select Custom, adjacent fields are available in which you enter a number and select a unit option: px (default), pt, pc, mm, cm, in, em, ex, or %. For example, if you select Top as the selected edge, Solid Line as the style, and Custom as the width; type 50 in the field; and then accept the default unit option, the following code is added:

    BORDER-TOP:50px solid

  • Color
    Sets the color for the selected border in the style. Select a color from the drop-down list or choose the ellipsis button (...) to open the Color Picker dialog box and select additional colors. For example, if you select Top as the selected edge, Solid Line as the style, and Blue as the color, the following code is added:

    BORDER-TOP:blue solid

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

Lists, Style Builder Dialog Box

Color Picker Dialog Box

Concepts

Working with CSS Overview

Other Resources

Other, Style Builder Dialog Box