Font, Style Builder Dialog Box
The Font page of the Style Builder dialog box makes it possible for you to define cascading style sheet (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.
Click Style on the Format menu to open the Style Builder dialog box.
Select Font in the left pane of the Style Builder dialog box.
The Font, Style Builder dialog box appears in the right pane.
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 the new style attributes inserted.
To add font 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 Font in the left pane of the Style Builder dialog box.
The Font, 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 (or, in this case, to the <BODY> element 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.
Tasks
UI Elements
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 might 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 of 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 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 (for example, #FF0000 is red).
Select an option from the drop-down list.
Click 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 dialog box 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 dialog box, 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-VARIANTattribute 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 option sets the size of the style's font using one of three attributes: Specific, Absolute, or 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 than that in which it is displayed.
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> element text is 8 pt., for example, and text within a <SPAN> element in the <BODY> element 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
This option sets predefined effects for the style. The following check boxes are available: None (no effects), Underline, Strikethrough, and Overline.
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
This option 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 Bold 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, lowercase, or UPPERCASE. 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
Reference
Text, Style Builder Dialog Box
Background, Style Builder Dialog Box