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.
- Capturing the Embedded Style Sheet
- Creating the External Style Sheet
- Referencing the External Style Sheet
Capturing 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.
-
Open the document that contains the embedded style sheet
-
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.
-
From the Edit menu, select Cut
OR
Press [Ctrl] + [X]
The content of the embedded style sheet has been removed. -
Delete the beginning and ending style sheet codes: <style><!-- and --></style>
-
Save and close the file
Creating the External Style Sheet
To create an individual external style sheet file.
-
From the File menu, select New...
OR
Press [Ctrl] + [N]
The New Document dialog box appears.
-
From the Category section, select Blank Page
-
From the Page Type section, select CSS
-
Click CREATE
A new CSS file opens. -
Place your insertion point below the <CSS Document> tag
-
From the Edit menu, select Paste
OR
Press [Ctrl] + [V]
The captured embedded style sheet will appear on the new .CSS file.
-
From the File menu, select Save As...
The Save As dialog box will appear. -
Using the Save in pull-down list and other navigational tools, select the desired save location
-
In the File name text box, type a name for the style sheet
NOTE: The file must have a .css extension -
Click SAVE
Referencing 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.
