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?

Microsoft FrontPage 2003

Creating External Style Sheets

An external style sheet is a separate file with a .CSS extension that is referenced by one or more HTML files (web pages). Changes made to the external style sheet automatically update the appearance of all of the HTML files referencing it.

The CSS file contains the code to modify the appearance of documents. Some people find it is easier to start with an embedded style sheet, so they can see the results of their style definitions and then convert it to an external style sheet.

return to topCreating the Style Sheet

To store your style settings in an external style sheet, you must first create and save it. To create the style sheet, follow these instructions:

  1. From the File menu, select New...
    The New task pane appears.

  2. Under New page, click MORE PAGE TEMPLATES...
    The Page Templates dialog box appears.

  3. Select the Style Sheets tab

  4. For a blank canvas, select Normal Style Sheet
    For a pre-defined style sheet, select the desired option

  5. Click OK
    The new style sheet appears.

return to topRedefining an Existing Style

You can redefine existing styles, or you can create new styles. Redefining HTML code (e.g., the H1 for Heading 1) will impact all occurrences of that style (e.g., all H1s). The adjustments are then automatically applied with the HTML code.

  1. Access the Style dialog box

  2. From the List pull-down list, select HTML tags

  3. From the Styles scroll list, select the style you want to modify (e.g., H1)

  4. Click MODIFY...
    The Modify Style dialog box appears.

  5. Click FORMAT » select the appropriate option
    A dialog box corresponding to your selection appears.

  6. Within the dialog box, make the desired changes

  7. Click OK

  8. Repeat steps 5-7 as necessary

  9. Click OK

  10. Click OK
    The style is modified.

return to topCreating a New Style

You can redefine existing styles, or you can create new styles. Creation of a new style results in a class style that modifies and applies to the base HTML code. Class styles are indicated by the period in front of the style name (e.g., .blue) For example, create a class style that changes the color to blue. The class style can be then applied to select H1 and H3 paragraphs in your document resulting in different appearances for the H1 and H3 headers.

  1. Access the Style dialog box

  2. Click NEW...
    The New Style dialog box appears.

  3. In the Name (selector) text box, type a name for your new style

  4. Click FORMAT » select the appropriate option
    A dialog box corresponding to your selection appears.

  5. Within the dialog box, make the desired changes

  6. Click OK

  7. Repeat steps 4-6 as necessary

  8. Click OK

  9. Click OK
    The style is created.

return to topSaving Your External Style Sheets

  1. From the File menu, select Save As...
    The Save As dialog box appears.

  2. Using the Save in pull-down list and other navigational tools, select the desired save location

  3. From the Save as type pull-down list, select CSS Files (*.css)

  4. In the File name text box, type a name for the style sheet
    NOTE: The filename must have a .css extension.

  5. Click SAVE
    The style sheet is saved.

return to topReferencing an External Style Sheet

  1. Open the web page that will be linked to the style sheet

  2. From the Format menu, select Style Sheet Links...
    The Link Style Sheet dialog box appears.
    Link Style Sheet dialog box

  3. Click ADD...
    The Select Style Sheet dialog box appears.

  4. Using the Look in pull-down list and other navigational tools, locate and select the style sheet

  5. Click OK

  6. Click OK
    The web page is linked to the style sheet.

Excellence. Our Measure. Our Motto. Our Goal.