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

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.

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.

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 

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

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.