This browser does not support basic Web standards, preventing the display of our site's intended design. May we suggest that you upgrade your browser?

Adobe Dreamweaver CS3

Specifying Fonts With CSS

You are able to make changes to the font of a specific tag or selected text using Cascading Style Sheets (CSS). In doing this, you increase the possibility that a browser will display your page as intended. For example, not all browsers will be able to view your chosen font, so you are allowed to list several fonts in order of preference. The browser will then select the first one it is able to view correctly. This document will instruct you on how to specify your font selections using CSS.

return to topSpecifying Fonts: Using the Tag Selector

CSS allows for individualized text formatting to occur with relative ease. The Tag option allows you to redefine the formatting of any HTML tag (e.g., <h1>, <p>, <body>) in your page. As an example, these steps will instruct how to select a font set for the heading 1, <h1>, tag.

  1. In the CSS Styles pane, click NEW CSS RULENew CSS Rule button
    The New CSS Rule dialog box appears.
    New CSS Rule dialog box: h1

  2. For Selector Type, select Tag

  3. From the Tag pull-down list, select the tag
    EXAMPLE: Select h1

  4. To create an external CSS file (.css), for Define in, select New Style Sheet File
    To create an internal or embedded style sheet, select This document only
    NOTES:
    You are able to link an external CSS file to several documents. For more information about linking external style sheets refer to Creating Styles: Attaching Style Sheets.
    An embedded style sheet is located in the <head> section of the document it was created for. The style settings for that style sheet apply only to that document.

  5. Click OK
    The CSS Rule definition dialog box appears.
    CSS Rule Definition dialog box: Type

  6. Under Category, select Type

  7. From the Font pull-down list, select a desired font set

  8. To test the results, click APPLY
    To cancel the changes, click CANCEL
    To accept the changes, click OK
    If OK is selected, changes will automatically apply to all affected tag(s).

return to topSpecifying Fonts: Using the Class Selector

The Class option allows you to create a custom style that can be applied to selected text. Once a Class style has been created, that style can be applied to any element on a page. As an example, these instructions will define how to set a font set that can be applied to an organization name wherever it appears on the web page.

  1. From the CSS Styles pane, click NEW CSS RULENew CSS Rule button
    The New CSS Rule dialog box appears.
    New CSS Rule dialog box: Class selector

  2. For Selector Type, select Class

  3. In the Name text box, type a descriptive name that will make clear the function/purpose of this class style
    NOTE: All class style names must began with a period (.).
    EXAMPLE: Type .UWEC

  4. Click OK
    The CSS Rule definition dialog box appears.CSS Rule definition dialog box: Type

  5. Under Category, select Type

  6. From the Font pull-down list, select a desired font set

  7. To cancel the changes, click CANCEL
    To accept the changes, click OK

  8. To apply this style, select an instance of the text that is to be altered using this style

  9. In the Properties pane, from the Style pull-down list, select the name of the class style
    EXAMPLE: Select UWEC
    Selected text will reflect the style's settings.

return to topSpecifying Fonts: Using the Advanced Selector

The Advanced option allows you to create styles for the different link options, a:active, a:link, a:hover, and a:visited. These link options are also known as pseudo-class selectors. As an example, these steps will instruct how to specify a bold weight for an a:visited link.

  1. From the CSS Styles pane, click NEW CSS RULENew CSS Rule button
    The New CSS Rule dialog box appears.
    New CSS Rule dialog box

  2. Select Advanced

  3. In the Selector text box, type the appropriate pseudo-class selector(s)
    OR
    From the Selector pull-down list, select the appropriate pseudo-class selector
    EXAMPLE: Type or select a:visited
    HINT: If the pull-down option is used, only one pseudo-class selector can be selected. If the text box option is used, one or more pseudo-class selectors can be specified.

  4. Click OK
    The CSS Rule definition dialog box appears.CSS Rule definition dialog box: Type

  5. Under Category, select Type

  6. From the Weight pull-down list, make the desired selection
    EXAMPLE: Select Bold
    NOTES:
    The numerical values in this selection indicated the level of boldness that will be added to the text.
    The values range from 100 (least bold) to 900 (bold).

  7. To test the results, click APPLY
    To cancel the changes, click CANCEL
    To accept the changes, click OK
    If OK is selected, changes will automatically be applied to all affected link(s).

Excellence. Our Measure. Our Motto. Our Goal.