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?

Macromedia Dreamweaver 8

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.

  2. On the General tab, from the Category section, select Basic Page

  3. On the General tab, from the Basic Page 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

To attach a newly created external style sheet to the files that reference it.

  1. Open the web page that will link to the style sheet

  2. Access the CSS Styles pane

  3. From the CSS Styles tab, click ATTACH STYLE SHEETAttach external style sheet
    The Attach External Style Sheet dialog box appears.

  4. To select a style sheet file, click BROWSE...
    The Select Style Sheet File dialog box appears.

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

  6. Click OK

  7. From the Add As option, select Link or Import
    HINT: Most external style sheets are attached with the Link command. Files reference linked style sheets using the <LINK> command in the HTML code. However, style sheets that are attached with the Import command can use embedded style sheets in addition to the external style sheet. Files reference imported style sheets using the <@import> command in the HTML code.

  8. Click OK
     The external style sheet is now attached to the file, and all style definitions will automatically apply to the file.

Excellence. Our Measure. Our Motto. Our Goal.