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 MX 2004

Converting Embedded Style Sheets to External Style Sheets

Defining styles within an embedded style sheet can be easier than doing so in an external style sheet because embedded style sheets allow you to see style results applied to the document as you define or redefine them. Embedded style sheets also make it easier to compare the results of an individual style to other existing styles. If the embedded style sheet you created will be used for other web pages, it is necessary that you convert it to an external style sheet, which can then be attached to other pages. For more information about embedded and external style sheets, refer to Types of Style Sheets.

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, so that it can later be transferred to the external style sheet.

  1. Open the document that contains the embedded style sheet

  2. From the View menu, select Code
    The HTML code appears.

  3. From the <HEAD> section of the document, within the style sheet, select the style definitions
    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 from embedded style sheet

  4. From the Edit menu, select Cut
    OR
    Windows: Press [Ctrl] + [X]
    Macintosh: Press [command] + [X]
    The content of the embedded style sheet has been cut for later use.

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

  6. From the File menu, select Save
    OR
    Windows: Press [Ctrl] + [S]
    Macintosh: Press [command] + [S]

  7. From the File menu, select Close
    OR
    Windows: Press [Ctrl] + [W]
    Macintosh: Press [command] + [W]

return to topCreating the External Style Sheet

Next, you must create an individual external style sheet file.

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

  2. Select the General tab

  3. From the Category section, select Basic page

  4. From the Basic page section, select CSS

  5. Click CREATE
    A new CSS file opens.

  6. Place your cursor below the /*CSS Document*/ tag

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

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

  9. Windows: Using the Save in pull-down list, select the desired save location
    Macintosh: Using the Where pull-down list, select the desired save location

  10. Windows: In the File name text box, type a name for the style sheet
    Macintosh: In the Save As text box, type a name for the style sheet

  11. Windows: From the Save as type pull-down list, select Style Sheets (*.css)
    Macintosh: The file is automatically saved as a style sheet (*.css)

  12. Click SAVE
    The external style sheet is created.

return to topAttaching the External Style Sheet

After you have created and saved the external style sheet, you need to attach it to the web page files that will reference it.

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

  2. Access the CSS Styles tab

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

  4. To select a style sheet file,
    1. Click BROWSE...
      The Select Style Sheet File dialog box appears.
    2. Using the Look in pull-down list, locate and select the style sheet

    3. Windows: Click OK
      Macintosh: Click CHOOSE

  5. For Add as, select Link or Import
    HINTS:
    Most web designers choose to attach style sheets using Link, which uses a <LINK> tag in the <HEAD> section of the HTML.
    Web pages using both embedded and external style sheets should reference the style sheet using Import, which uses the <@import> tag in the <HEAD> section of the HTML.

  6. Windows: Click OK
    Macintosh: Click OK
    The external style sheet is now attached to the file, and all style definitions automatically apply to the web page.

Excellence. Our Measure. Our Motto. Our Goal.