New Style and Modify Style Dialog Boxes, Font

  • Article

 

The Font category of the New Style dialog box enables you to define cascading style sheet (CSS) style rules for text fonts. You can apply these style rules directly to HTML elements or add them either to the current page or to an external style sheet.

To define a CSS font style rule for UI elements on the current page

  1. Open the page in either Design view or Source view.

  2. Optionally, select the text and/or HTML elements to apply the style to.

  3. In the Format menu, click New Style.

    The New Style dialog box is displayed.

  4. In the Category pane, select Font.

    The font style selections are displayed in the right pane.

When you apply styles to selected text in Design view, style attributes are inserted inline into the HTML markup for the page. Switch to Source view to review the new style attributes.

To add font attributes to a CSS style rule defined in an external style sheet

  1. Open an existing external style sheet.

  2. Put the cursor inside the braces of the style rule to be modified.

  3. Do one of the following.

    • Right-click the style sheet in the editor, and then from the shortcut menu, choose Build Style.

    • In the Style Sheet Toolbar, choose Build Style.

    The Modify Style dialog box is displayed.

  4. In the left pane, click Font.

    The font style selections appear in the right pane.

You can apply a CSS style class to an element in the Web page or to the body element itself by setting the element's class property to the name of the class selector.

UIElement List

The following tables list options that are available under the Font category in the New Style and Modify Style dialog boxes.

Font Options

  • font-family
    The name of a text font. Font names that contain spaces should be surrounded by quotation marks, such as "Times New Roman". You can specify multiple font names, separated by commas (,). It is good practice for the last font in the list to be a generic font such as "serif", "sans-serif", or "monospace".

  • font-size
    The size of the font. If you enter a value, you can select value units from the list. It is good practice to use relative sizes, such as "small", "x-large", or a percentage, so that users can adjust the font size in the Web browser.

  • font-weight
    The weight of the font, such as "normal", "bold", or "400". A numerical value represents a relative weight from 100 to 900.

  • font-style
    The style or slope of the font, such as "normal" or "italic". If you select "oblique", most Web browsers will render the font as italic.

  • font-variant
    A variant style for rendering the font. Values are as follows:

    • normal   The font will be rendered normally.

    • small-caps   The font will be rendered in small capital letters.

    • inherit   The variant style will be inherited from the parent element.

  • text-transform
    A value that defines capitalization effects for the text. Values are as follows:

    • capitalize   The first letter of each word is rendered uppercase.

    • lowercase   All letters are rendered lowercase.

    • uppercase   All letters are rendered uppercase.

    • none   Text capitalization is not changed.

    • inherit   The text-transform style will be inherited from the parent element.

  • color
    The color of the text font. To choose from more colors, use the down arrow, or click the square icon on the right. For more information, see More Colors and Color Dialog Boxes.

  • text-decoration
    A combination of the following text attributes: underline, overline, line-through, and blink. If you select none, all other check boxes will be cleared.

Other UI Elements

  • Selector
    (New Style dialog box only) Enables you to type a class name or click an HTML element to apply the style to. Class names must begin with a period (.). You can also select (inline style), which causes the style to be applied inline to the selected text or HTML elements.

  • Define in
    (New Style dialog box only) Enables you to specify where to write the definition of the style rule. Values are as follows:

    • Current page   The style rule is written to a style element in the current page.

    • New style sheet   A new CSS style sheet is added to the project and the rule is written in it.

    • Existing style sheet   The style rule is added to the CSS style sheet that you specify by using the URL list.

  • URL
    (New Style dialog box only) Enables you to select an existing CSS style sheet. This option is enabled only when Define in is set to Existing style sheet.

  • Apply new style to document selection
    (New Style dialog box only) Specifies that the style is applied to the selected text, class, or HTML element.

  • Preview
    Displays an example of how the style rule will appear when it is applied.

  • Description
    Shows the CSS definition of the style rule.

See Also

Working with CSS Overview
New Style and Modify Style Dialog Boxes, Block
NIB: Color Picker Dialog Box
NIB: Font Picker Dialog Box