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

Converting Embedded Style Sheets to External Style Sheets

Defining styles within an embedded style sheet can be easier than defining styles in an external style sheet because embedded style sheets allow you to see the style results applied to the document immediately. You can also judge the results of an individual style in comparison to other styles that you have created. Once the style sheet is finalized, or fairly close, you can convert the embedded style sheet to an external style sheet.

return to topCapturing the Embedded Style Sheet

To convert an embedded style sheet, you must first capture it. Capturing the embedded style sheet is like taking a picture of its content, which you will later transfer to the external style sheet.

  1. Open the document that contains the embedded style sheet

  2. Using the Code view, from the <head> section of the document, select the style sheet
    NOTE: The style sheet begins with <style><!-- and ends with --></style>. Make sure to select all of the text that falls between these two tags.
    Example of area to be cut on embedded style sheet

  3. From the Edit menu, select Cut
    OR

    Press [Ctrl] + [X]
    The content of the embedded style sheet has been removed.

  4. Delete the beginning and ending style sheet codes: <style><!-- and --></style>
    Example of area of embedded style sheet to be deleted

  5. Save and close the file

return to topCreating the External Style Sheet

To create an individual external style sheet file.

  1. From the File menu, select New...
    OR
    Press [Ctrl] + [N]
    The New Document dialog box appears.
    New Document dialog box

  2. From the Category section, select Blank Page

  3. From the Page Type section, select CSS

  4. Click CREATE
    A new CSS file opens.

  5. Place your insertion point below the <CSS Document> tag

  6. From the Edit menu, select Paste
    OR
    Press [Ctrl] + [V]
    The captured embedded style sheet will appear on the new .CSS file.
    Example of style sheet in .css file

  7. From the File menu, select Save As...
    The Save As dialog box will appear.

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

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

  10. Click SAVE

return to topReferencing the External Style Sheet

After you have created an external style sheet, you need to attach the style sheet to the files that will reference it. Directions for doing this can be found in the Creating Style Sheets document under Attaching Style Sheets.

Excellence. Our Measure. Our Motto. Our Goal.