Overview of CSS features in Dreamweaver CS3

Migrating development styles to the rest of your site

What we’ve set up in the previous section is a really little website, consisting of two HTML files and a CSS file. For our purposes, we are assuming the new file (cs3a.html) is the default appearance for the website. The original file (cs3.html) is our development test HTML file. That particular file has a different appearance because of the styles we defined in the head of the document. Now let’s migrate those styles to the main CSS style sheet file.

1. Open cs3.html.
2. In the All mode of the CSS Styles panel, right-click (Windows) or control-click (Mac) the "body,td,th" rule and choose Move CSS Rules from the context menu.
3. In the Move To External Style Sheet dialog box, choose the existing CSS file (oneColLiqCtrHdr.css) and click OK.
4. Repeat steps 2 and 3 for the "#mainContent p:first-line" rule.
5. Repeat steps 2 and 3 for the "body" and ".oneColLiqCtrHdr #container" rules. You will see a Rule with Same Name Exists message. Note that in addition to displaying the conflicts, the message explains that the new rule will not replace the old rule, but will simple be appended to the CSS style sheet. Click Yes.
6. Switch to or open cs3a.html, and notice that both files now look the same.
7. Switch to or open oneColLiqCtrHdr.css.
8. Using the All mode of the CSS Styles panel, navigate to the duplicate code by clicking each rule.
9. Select the first ".oneColLiqCtrHdr #container" rule (this should be the original code, which defines a different border).
10. Click the Delete CSS Rule button in the bottom right of the CSS Styles panel.
11. Save all files by choosing Save All from the File menu.

Page 6 of 7

Previous Page

Next Page