Style Builder

Use the Style Builder to define an HTML style, background, color, and more for field labels or data. There are five sections to the Style Builder:

Font

The Font page of the Style Builder dialog box makes it possible for you to define CSS font attributes.

  • Family — Provides a list of font choices for text displayed in this style. If you are designing documents for the Internet, choose fonts that most users will have. A diverse Internet audience will probably not all have a wide assortment of fonts installed. If you select Family, you can click the adjacent browse button (...) to open the Font Picker dialog box and select fonts.
  • System Font — Select this option to have the style to apply a system font choice that the user has defined on the computer viewing the page. For example, if you select Window Caption, a viewer's web browser will display text on your page that is formatted in this style using the font assigned to Window Caption on the viewing computer. This Window Caption font might be Times on one computer, and Verdana on another.
  • Font Attributes
    • Color — Sets the color of text displayed in the style. Click the browse button (...) or the dropdown arrows to specify a color.
    • Italics — Sets the FONT-STYLE attribute for text displayed in this style. Select either <Not Set> (no option chosen), Normal, or Italic.
    • Small Caps — Sets the FONT-VARIANT attribute for text displayed in this style. Select either <Not Set> (no option chosen), Normal, or Small Caps.
  • Size — This sets the size of the style's font using one of three attributes: Specific, Absolute, Relative.
    • Specific — Sets a specific size for the font. The adjacent drop-down list displays unit options, which include px, pt(default), pc, mm, cm, in, em, ex, and %.
    • Absolute — Sets an absolute size for the font, which you choose from a list of options. Select <Not Set> (no value specified), XX-Small, X-Small, Small, Medium, Large, X-Large, or XX-Large.
    • Relative — Sets a relative size for the font, which you choose from a list of options.
  • Effects — Sets predefined effects for the style. These check boxes are available: None (no effects), Underline, Strikethrough, and Overline.
  • Bold — Sets the FONT-WEIGHT attribute based on either Absolute or Relative values.
    • Absolute — Sets the absolute bold attribute for the style to the bold attribute that is associated with the font. Select either <Not Set> (no option chosen), Normal (not bold), or Bold.
    • Relative — Sets the relative bold attribute for the style to a bold attribute that is either more or less bold than the default bold value for the font. Select <Not Set> (no option chosen), Lighter, or Bolder. Because Lighter and Bolder attributes are relative to individual fonts, the degree of boldness varies according to the font to which it is being applied.
  • Capitalization — Sets the TEXT-TRANSFORM attribute for the style. Select <Not Set> (no option chosen), None, Initial Cap, lowercase, or UPPERCASE.

Background

The Background page of the Style Builder dialog box makes it possible for you to set attributes for a CSS style that will define a background color or image when the style is applied. Options available on the Background page of the Style Builder dialog box include:

  • Color — Sets the BACKGROUND-COLOR attribute for the style. Select an option from the drop-down list or click the browse button (...) to open the Color Picker dialog box and select additional colors.
  • Transparent — This check box is used to set the BACKGROUND-COLOR attribute to the value transparent. If you select transparent, you cannot select a background color.
  • Background image — Sets the image the style will display in the background. Type a path and filename in the field or click the browse button (...) to open the URL Picker and go to the location of the image.
  • Scrolling — Sets the BACKGROUND-ATTACHMENT attribute for the background image applied by the style. Select a value from the drop-down list. An image can either remain fixed as the page scrolls or scroll along with the text and images above the background. Select <Not Set> (no option chosen), Scrolling background, or Fixed background.
  • Position — Sets the position attributes for the background image applied by the style. The position value relates to the tiling attributes. If you set a position for the background and do not choose tiling attributes, the background image is fixed at the specified position. If you set a position for the background and choose tiling attributes, the position serves as the starting point for the tiling attribute. You must select both horizontal and vertical position values. If you specify only one value, the CSS Editor displays an invalid property name in the CSS Editor. When you select both horizontal and vertical position values, the property is displayed correctly as background-position. An example of a valid background-position declaration is BACKGROUND-POSITION:left center.
    • Horizontal — Sets the horizontal position for the background image applied by the style. Select <Not Set> (no option chosen), Left, Center, Right, or Custom. If you select Custom, the fields to the right of Custom are available. The default value is 50%. Enter a value in the number field and choose an increment (px, pt, pc, mm, cm, in, em, ex, or %) from the unit field's drop-down list.
    • Vertical — Sets the vertical position for the background image applied by the style. Select an option from the drop-down list. Select <Not Set> (no option chosen), Left, Center, Right, or Custom. If you select Custom, the fields to the right of Custom are available. The default value is 50%. Enter a value in the number field and choose a unit option (px, pt, pc, mm, cm, in, em, ex, or %) from the drop-down list in the unit field.
  • Do not use background image — When selected, removes the background image from the current page. The Image attributes are unavailable in the dialog box. If an image had been specified from the page, the background-image property is removed from the style after you click OK.
  • Tiling — Sets the tiling attributes for the background image assigned by the style. Images can tile several different ways, as shown in the following table:
    Tiling Attribute Description
    Tile in horizontal direction Image tiles from left to right across the page, but not from top to bottom.
    Tile in vertical direction Images tile from top to bottom once.
    Tile in both directions Images tile both horizontally and vertically.
    Do not tile Disables tiling; image appears in locations specified by the position value and does not repeat.
    Not set No option chosen; no code added to the style.

The Text page of the Style Builder dialog box makes it possible for you to define CSS text positioning attributes. Options available on the Text page of the Style Builder dialog box include the following.

  • Alignment — For the following alignment options, if you select <Not Set>, no code is added to the Style.
    • Horizontal — Sets the TEXT-ALIGN attribute value for text formatted in the style. Select <Not Set> (no option chosen), Left, Center, Right, or Justified. Letter and Line values that you set below are adjusted to accommodate the Justified attribute.
    • Vertical — Sets the VERTICAL-ALIGN attribute value for text formatted in the style. Select <Not Set>, (no option chosen), Subscript text, or Superscript text.
  • Justification — Sets the TEXT-JUSTIFY attribute value for text formatted in the style. Select <Not Set> (no option chosen), Auto, Space words, Newspaper style, Distribute spacing, or Distribute all lines. Justification attributes are available only if you select Justified for the horizontal value.
  • Spacing Between — Sets spacing between letters and vertical spacing between lines of text formatted in the style.
    • Letters — Sets the value for vertical spacing between lines of text formatted in the style. Select <Not Set> (no option chosen), Normal, or Custom. If you select Custom, the fields to the right of Custom are available. Enter a value from 1 to 512 in the number field and choose a unit option (px, pt, pc, mm, cm, in, em, ex, or %). The default unit option is pt.
    • Lines — Sets the value for vertical spacing between lines of text formatted in the style. Select <Not Set> (no option chosen), Normal, or Custom. If you select Custom, the fields to the right of Custom are available. Enter a value from 1 to 512 in the number field and choose a unit option (px, pt, pc, mm, cm, in, em, ex, or %). The default unit option is pt.
  • Text Flow
    • Indentation — Sets the TEXT-INDENT attribute value for text formatted in the style. Enter a value (1 – 512) in the number field and choose a unit option (px, pt, pc, mm, cm, in, em, ex, or %). The default unit option is pt.
    • Text Direction — Sets the DIRECTION attribute value for text formatted in the style. Select <Not Set> (no option chosen), Left to right, or Right to left.
    Note: When the attribute is <Not Set>, no code is added to the style.

Position

The Position page of the Style Builder dialog box makes it possible for you to define CSS positioning attributes.

  • Position Mode — Sets the mode that determines which subsequent positioning fields become available. Select one of the following options from the drop-down list:
    • <Not Set> When the attribute is <Not Set>, no code is added to the style.
    • Position in normal flow – Does not change position of element; height and width can be specified. The preview area adjacent to the Position Mode selector updates to reflect the mode selections.
    • Offset from normal flow – Makes it possible for you to specify top and left positions for an element relative to its position in the normal flow, height and width can be specified. An element’s normal flow is its position before the style is applied.
    • Absolute position — Makes it possible for you to specify absolute top position, absolute left position, Z-index, height, and width for an element. You typically absolutely position elements that you want to anchor to a specific position. For example, you might absolutely position a logo so that is does not move as you add and edit other elements.
  • If you select a position mode, the following options are available:
    • Top — Sets the top position of an element, either as an absolute value or as a value relative to its position in the normal flow. Enter a value and choose a unit option (px, pt, pc, mm, cm, in, em, ex, or %). The default unit option is px.
    • Left — Sets the left position of an element, either as an absolute value or as a value relative to its position in the normal flow. Enter a value and choose a unit option (px, pt, pc, mm, cm, in, em, ex, or %). The default unit option is px.
    • Height — Sets the height of an element. Enter a value and choose a unit option (px, pt, pc, mm, cm, in, em, ex, or %). The default unit option is px.
    • Width — Sets the width of an element. Enter a value and choose a unit option (px, pt, pc, mm, cm, in, em, ex, or %). The default unit option is px.
    • Z-Index — Sets the Z-order for an element. The Z-order controls the display of overlapped elements; elements with higher Z-order values are displayed in front of those with lower Z-order values. To move the element higher in the Z-order, enter a positive number, for example. Z-INDEX:99
  • To move the element lower in the Z-order, enter a smaller or negative number.
    Note: Z-Index and position are related. If you have entered position values that cause elements to overlap, you can control which element appears on top of the other by assigning appropriate Z-Index values. Assign a higher Z-Index value to the element that you want to appear on top of the other element.

Edges

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.

  • 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 %. 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 %. 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.
    • 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 %.
    • Color — Sets the color for the selected border in the style. Select a color from the drop-down list or click the browse button (...) to open the Color Picker dialog box and select additional colors.