Share via

Edges, Style Builder Dialog Box

  • Article

The Edges page of the Style Builder dialog box makes it possible for you to define CSS style attributes that determine the border and margins for 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, open your HTML document in Design view of the HTML Designer and use the Document Outline window to select an element to format. Then choose Build Style from the Format menu to open the Style Builder dialog box, and select the Edges 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 CSS style attributes inserted.

To add edge attributes to a CSS style 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 Edges 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 most elements within the <BODY> 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:

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
    Select All, Top, Bottom, Left, or Right. Code is not added to the style until you select a border style.
  • Style
    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
    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, 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

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 | Lists, Style Builder Dialog Box | Other, Style Builder Dialog Box | Color Picker Dialog Box