Overview of CSS features in Dreamweaver CS3

Move styles and style properties among files

The simple flow we just reviewed is a common enough approach: take something that exists, and modify it directly to change the appearance. The disadvantage of this approach is that development changes affect all files using this style sheet.

Dreamweaver CS3 introduces features that enable developers to migrate styles, appealing to a workflow that was not previously smooth. Therefore, this workflow walks you through the process of migrating properties from one file to another.

Modify CSS styles in a test file

1. Open cs3.html if not already open.
2. Choose Page Properties from the Modify menu.
3. In the Appearance category, set the following values:
   • Text color: #330000
   • Background color: #000000
4. Click OK.
5. Click in the phrase "Main Content."

6. Open the Current mode of the CSS Styles panel and review the cascade of rules. Notice that the BODY tag is redefined in three places: in the original CSS style sheet, and twice more in the head of this file.

   

   Figure 5. Current mode for the selection indicates the cascade of rules

7. Switch to All mode in the CSS Styles panel and select the .oneColLiqCtrHdr #container rule.
8. Right-click (Windows) or control-click (Mac) the rule and choose duplicate from the contextual menu.
9. In the Duplicate CSS Rule dialog box, select the option for This document only, and click OK.
10. In the All mode of the CSS Styles panel, select the .oneColLiqCtrHdr #container rule under the <style>. It may help keep you organized to collapse the oneColLiqCtrHdr.css category.
11. Click to highlight the border setting in the Properties sheet for the Background property, then replace it by typing 2px solid #CCFFFF. There is a green outline surrounding the content defined by the DIV with an ID of container, but the line is hard to see because of a CSS visual aid. Let’s turn that off.
12. Click the Visual Aids item from the View menu, then select CSS Layout Outlines. This option is checked by default, so choosing it now will uncheck the option. The green border is now more visible.
13. Click the New CSS Rule button in the bottom right corner of the CSS Styles panel.
14. Choose the Advanced Selector type, and type #mainContent p:first-line. This will affect the first-line pseudo-element of any paragraphs contained in the mainContent DIV.
15. Leave the Define in option to This document only, and click OK.
16. In the CSS Rule Definition dialog box, set the Case option to Uppercase in the Type category.
17. Click OK.
18. Save cs3.html and leave it open.

Create a new file for comparison

1. Create a new file by choosing New from the File menu.
2. Within the New Document dialog box, select the Blank Page tab, then choose HTML as the Page Type and "1 column liquid, centered, header and footer" as the Layout.
3. Choose Link to Existing File from the Layout CSS options.

4. Click the Attach Style Sheet button (the button looks like a chain link).

   

   Figure 6. The Attach Style Sheet option allows you to link to an existing style sheet when creating a new file

5. In the Attach External Style Sheet dialog box, click the Browse button.
6. In the Select Style Sheet File dialog box, navigate to the oneColLiqCtrHdr.css file located in the css folder and click OK. You will likely see a message indicating that the file must be saved before a correct link can be established. Click OK in that error message as well.
7. In the Attach External Style Sheet dialog box, select the Link option and click OK.
8. In the New Document dialog box, click Create.
9. Save the newly-created untitled HTML file by choosing Save from the File menu and typing cs3a.html.

Page 5 of 7

Previous Page

Next Page