|
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.
At a glance, the process consists of the following:
 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
Next, you must create an individual external style sheet
file.
-
From the File menu, select New...
OR
Press [Ctrl] + [N]
The New Document dialog box appears.
-
On the General tab, from the Category
section, select Basic Page
-
On the General tab, from the Basic Page
section, select CSS
-
Click CREATE
A new CSS file will open.
-
Place your cursor 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 Filename text box, type a name for the
style sheet
NOTE: The file must have a
.css extension
-
Click SAVE
Referencing
the External Style Sheet
Finally, you must attach the newly created external style
sheet to the files that reference it.
-
Open the web page that will link to the style sheet
-
Access the CSS Styles tab
-
From the CSS Styles tab, click ATTACH
STYLE SHEET
The Link External Style Sheet dialog box appears.
-
To select a style sheet file, click BROWSE...
The Select Style Sheet File dialog box appears.
-
Using the Look in pull-down list and other
navigational tools, locate and select the style sheet
-
Click OK
-
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.
-
Click OK
The external style sheet is now attached to the file, and all
style definitions will automatically apply to the file.
|