|
Creating a linked style sheet
The footer style you created may be fun to apply to other tags in basic.html to see the effects, but it isn't really useful anywhere else in the document. It would be very useful, however, if it were available in all the documents on your site.
If you have already set up a style sheet for a document and then you decide that it would be more useful as an external style sheet that other documents can access, there's a simple procedure to convert the document's style sheet to a separate CSS file.
To extract CSS style information from the current document and store it in an external CSS file:
| 1 |
Choose Window > HTML Source to open the HTML Source inspector. |
| 2 |
Scroll through the HEAD section of the document until you see <STYLE TYPE="text/css"> . |
| 3 |
Click to place the insertion point to the left of the first style. |
|
The first style begins right after the opening comment tag ( <!-- ). |
| 4 |
Drag down until you have highlighted everything up to, but not including, the closing comment tag ( --> ). |
| 5 |
Press Control+X (Windows) or Command+X (Macintosh) to cut the selected text. |
| 6 |
Choose File > New to open a new Dreamweaver document. |
| 7 |
In the HTML Source inspector, select all of the text and tags in the new file by pressing Control+A (Windows) or Command+A (Macintosh). |
| 8 |
Press Control+V (Windows) or Command+V (Macintosh) to paste the style information in place of the selected text. |
| 9 |
Choose File > Save. |
|
In the dialog box that appears, give your file a name; the name should end with .css. |
| 10 |
Close the CSS file. |
 |
|
To link the original document to the external style sheet:
| 1 |
Return to the original document (basic.html) and click in the HTML Source inspector. |
| 2 |
Remove the following tags from the head of the document: |
|
<STYLE TYPE="text/css">
<!--
-->
</STYLE>
|
| 3 |
Close the HTML Source inspector. |
| 4 |
In the CSS Style palette, click the Open Style Sheet button. |
| 5 |
Click Link. |
| 6 |
Browse to the CSS file that you just created. When you've selected the correct CSS file in the Link External Style Sheet dialog box, click OK. |
|
All the tag and selector styles in the CSS file are automatically applied to the appropriate tags in your document, and the class styles appear in the CSS Style palette. |
| 7 |
Click Done. |
|
|
|
