Dreamweaver Article

An Overview of CSS in Dreamweaver 8

Moving from Document Style Sheet to External Style Sheet

Some of the nicest workflow features—such as using the Page Properties dialog box to define CSS style properties—still write the rules to the head of the existing document. In most cases, you will want to move those rules into an external style sheet. There are two approaches available to do this. The first option is to export any existing styles into a new external style sheet. The second option is to copy the style code into an existing external style sheet. If you have an existing external style sheet, you should copy the code into it manually using the second option I outline below. Don’t try to export into an existing style sheet, or you will overwrite the CSS code that is already in it.

Option 1: Export Any Existing Styles into an External Style Sheet

1. Save csstest.htm as csstestexport.htm.
2. In csstestexport.htm, choose File > Export > CSS Styles.

3. In the Export Styles as CSS File dialog box, save what will be a CSS file as test2.css.

   Note: The file name cannot be test.css because exporting CSS styles creates a new CSS file with the rules defined in the HTML document, replacing any CSS file with the same name. Any rules defined in the original CSS file would be lost.

4. Although a CSS file has been created containing all of your styles, those same styles also still exist in the head of your document. If it is not already open, launch the CSS Styles panel by choosing Window > CSS Styles.
5. In the CSS Styles panel, you will see <style> and the existing styles may or may not be visible indented underneath. This listing includes all of the styles included in the internal style sheet. Select <style> in the CSS Styles panel and click the Delete CSS Style icon in the bottom right of the panel (it looks like a trash can). Although the page suddenly looks ugly—and the style code has been removed from the head of csstestexport.htm—the class attributes are still written to the code where those classes were assigned.
6. Still in the CSS Styles panel, click the Attach Style Sheet icon.
7. Within the Attach External Style Sheet dialog box, click the Browse button and locate the test2.css file you exported in step 3. Click OK, and then OK again to return you to the page.
8. Note that the page returns to the same appearance, including the paragraph of text to which you applied the class style. The CSS Styles panel now says test2.css instead of <style>, although you also still have the test.css style sheet.
9. Switch to Code view and note that all style code has been removed from the head of the document with the exception of two link tags, which point to the test.css and test2.css files.

Option 2: Copy the Style Code into an Existing External Style Sheet

Note: If you followed the steps in option 1 above, the code will have already been moved to an external style sheet. So when you get to step four below, you won’t see the code to be copied. If you want to follow the steps below, try undoing a few times in Dreamweaver (Edit > Undo) to get the code back into the head of the csstest.htm file. Then, use the steps below to copy the CSS code into the existing external style sheet.

1. Open test.css, which opens in Code view.
2. Open csstest.htm. If it opens in Design view, switch to Code view by selecting View > Code.
3. Scroll to the top of the code, locating the style tags in the head of the page.
4. Copy the code contained within the open and close style tags by selecting Edit > Copy. The code in my document looks like the following

p {
font-family: Geneva, Arial, Helvetica, sans-serif;

color: #0000FF;
}
.hilite_text {
color: #003300;
background-color: #FFFF66;
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;

color: #333333;
}
.layer1 {
border: medium dashed #000000;
margin: 10px;
width: 250px;
padding: 10px;
position: relative;
left: 50px;
} 

5. Switch to test.css and paste this code below the existing code.
   
6. Save test.css and close.
   
7. In csstest.htm, remove the remaining style tag code:
   

<style type=“text/css”>

</style> 

After using both workflows for migrating CSS rules from a document to an external style sheet, notice the test.css has all of the rules, and test2.css has all but one of the rules. In development, avoid this by using only one of the above workflows, then attaching external style sheets to new documents as you create them.

You have used the new UI elements in Dreamweaver 8 to create styles... and to figure out what you have created. You have also investigated some of the new display capabilities for style properties.

Where to Go from Here

Now that you are familiar with the CSS tools and features in Dreamweaver 8, I recommend that you read Adrian Senior’s six-part tutorial on designing with CSS in Dreamweaver 8. Even if you have been through the Dreamweaver MX 2004 version of the article series, I recommend that you go through it again. They have been completely updated for Dreamweaver 8 and will help you get into good CSS workflow habits.

Page 10 of 10

Previous Page