Share via

Font, Style Builder Dialog Box

  • Article

The Font page of the Style Builder dialog box makes it possible for you to define CSS font attributes. You can apply these attributes directly to HTML elements, or you can add them to CSS style rules.

To apply font attributes directly to text in HTML elements on your page, open your HTML document in Design view of the HTML Designer and select the text to format. Then choose Build Style from the Format menu to open the Style Builder dialog box, and select the Font 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 apply font styles to text selected in Design view, style attributes are inserted inline into the HTML markup for your page. Switch to HTML view to review these new style attributes inserted.

To add font 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 Font 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 (or, in this case, to the <BODY> itself) by assigning the CSS style selector as the CLASS property for the element.

Options available on the Font page of the Style Builder dialog box include the following:

Font Name

  • Family
    Provides a list of choices for the font to be used 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 choose the adjacent ellipsis button (...) to open the Font Picker dialog box and select fonts. For more information, see Font Picker Dialog Box. It is common to list several fonts to provide a range of options. For example, you might select Verdana (a Windows system font designed for Web display) from the Font Picker, and then manually add Arial, Helvetica (for Macintosh browsers) and Sans-Serif (the generic font choice for users who do not have any other the other fonts listed). The CSS style markup for FONT-FAMILY would then be:

FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif

  • 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. The CSS style markup that applies the Window Caption system font, for example, is:

FONT: caption

Font Attributes

  • Color
    Sets the color of text displayed in the style. There are several ways to specify a color:

    • Type the name of a color
    • Type a valid RGB color value (example, #FF0000 is red)
    • Select an option from the drop-down list
    • Choose the ellipsis button (...) to open the Color Picker dialog box and select additional colors.

    For example, if you select red, the following CSS attribute: value pair is inserted:

COLOR: red

Note   If you select a color from the Color Picker rather than from the drop-down list, a hexadecimal RGB color value is inserted rather than the color name. For example, if you select 'red' from the Color Picker, the following CSS attribute: value pair is inserted:

COLOR: #ff0000

  • Italics
    Sets the FONT-STYLE attribute for text displayed in this style. Select either <Not Set> (no option chosen), Normal (not italicized), or Italic. For example, if you select "Italic," the following CSS attribute: value pair is inserted:

FONT-STYLE: italic

Note   When the attribute is <Not Set>, no code is added to the style. The Italics attribute cannot be applied to system fonts.

  • Small Caps
    Sets the FONT-VARIANT attribute for text displayed in this style. Select either <Not Set> (no option chosen), Normal (not small caps), or Small Caps. For example, if you select Small Caps, the following CSS markup is inserted:

FONT-VARIANT: small-caps

Note   The Small Caps attribute cannot be applied to system fonts. When the attribute is <Not Set>, no code is added to the style.

Size

This sets the size of the style's font using one of three attributes: Specific, Absolute, Relative.

Note   When the attribute is <Not Set>, no code is added to the style. The Size attribute cannot be applied to system fonts.

  • 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 %. For example, if you type 20 and accept the default unit value, the following CSS markup is inserted:

FONT-SIZE: 20pt

Note   When the attribute is <Not Set>, no code is added to the style. Avoid using pixel (px) measurements, because text formatted in pixels will print at a much smaller size that it displays.

  • 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. For example, if you choose X-Small, the following CSS markup is inserted:

FONT-SIZE: x-small

Note   When the attribute is <Not Set>, no code is added to the style.

  • Relative
    Sets a relative size for the font, which you choose from a list of options. The size is relative to the parent in the cascading style. If <BODY> text is 8 pt., for instance, and text within a <SPAN> in the <BODY> is styled as Smaller, the <SPAN> text is smaller than 8 pt. Select <Not Set> (no value specified), Smaller, or Larger. For example, if you choose Larger, the following CSS markup is inserted:

FONT-SIZE: larger

Note   When the attribute is <Not Set>, no code is added to the style.

Effects

Sets predefined effects for the style. These check boxes are available: None (no effects), Underline (Sample Text), Strikethrough (Sample Text), and Overline:

<SPAN Style="TEXT-DECORATION: UNDERLINE">Sample Text</SPAN>

If you select None, no effects are available. If None is not selected, you can choose any combination of the remaining effects. For example, if you choose both Underline and Strikethrough, the following CSS markup is inserted:

TEXT-DECORATION: underline line-through

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. For example, if you choose Bold, the following CSS markup is inserted:

FONT-WEIGHT: bold

Note   The Absolute and Relative Bold attributes cannot be applied to system fonts.

  • 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 (less bold than default bold), or Bolder (more bold than default bold). Because Lighter and Bolder attributes are relative to individual fonts, the amount of boldness varies according to the font to which it is being applied. For example, if you choose Bolder, the following CSS markup is inserted:

FONT-WEIGHT: bolder

Capitalization

Sets the TEXT-TRANSFORM attribute for the style. Select <Not Set> (no option chosen), None (capitalization is as typed), Initial Cap (Sample Text), lowercase (sample text), or UPPERCASE (SAMPLE TEXT) . For example, if you choose UPPERCASE, the following code is added:

TEXT-TRANSFORM: uppercase

Note   When the attribute is <Not Set>, no code is added to the style.

See Also

Introduction to Cascading Style Sheets | Working With CSS Styles | Text, Style Builder Dialog Box | Background, Style Builder Dialog Box | Color Picker Dialog Box | Font Picker Dialog Box