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

Converting Embedded to External Style Sheets

Creating and refining an embedded style sheet can be easier than creating an external style sheet because you can actually see the results applied to the document rather than just the dialog box sample. You can also see the results of an individual style as compared to other styles you have created. Once the style sheet nears completion, you can convert the embedded style sheet to an external style sheet. External style sheets can be attached to any number of web pages at the same time.

return to topCapturing the Embedded Style Sheet

To capture the embedded style sheet, use the Cut option. This removes the style sheet from the current document and allows you to use the Paste option to insert it into an external style sheet.

  1. Open the document containing the embedded style sheet

  2. Click SHOW CODE VIEW Code view

  3. Select the style sheet code
    NOTES:
    The style sheet is located near the beginning of the code.
    It begins with <STYLE> and ends with </STYLE>.
    Be sure to select all of the related text.
    Example of Embedded style sheet

  4. From the Edit menu, select Cut

  5. Complete the steps for Creating the External Style Sheet

  6. Close the web page
    WARNING: If you save changes before closing the file, your style sheet may be lost if it is somehow removed from the Clipboard before pasted into the external style sheet.

return to topCreating the External Style Sheet

  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

  5. Click OK
    The new external style sheet opens.

  6. From the Edit menu, select Paste

  7. Delete the beginning and ending codes of <STYLE>, </STYLE>, <!--, and -->
    Example of External style sheet

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

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

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

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

  12. Click SAVE
    The external style sheet is created and saved.

return to topReferencing the External Style Sheet

The last step in converting embedded style sheets to external style sheets is to reference the external style sheet in the desired web page(s). For information on how to do this, refer to Referencing an External Style Sheet.

Excellence. Our Measure. Our Motto. Our Goal.