• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Adding CSS

In Part I of this book, I showed you how to add style sheets to your Web pages. Dreamweaver includes an assortment of tools that take some of the drudgery out of creating and maintaining well-formed style sheets. You can use Dreamweaver to add CSS to a single Web page (see "Adding CSS to a Web Page" in Chapter 2) or to an entire Web site (see "Adding CSS to a Web Site" in Chapter 2).

To add CSS to a Web page:

Open a new or existing HTML file by choosing File > New or File > Open.

In the CSS Styles palette, click the New Style button (Figure 19.6).

Figure 19.6. The CSS Styles palette shows all the classes that are available in this document (in this figure, none).

If the palette is not open, choose Window > CSS Styles.

The New Style dialog box appears (Figure 19.7).

Figure 19.7. The New Style dialog box allows you to select the type of style you are adding and if you want the style in an external style sheet or not.

Choose the CSS selector types you want to use (see "The Parts of a CSS Rule" in Chapter 1).

Choose Make Custom Style (Class) if you want to add a class; choose Redefine HTML Tag or Use CSS Selector for an ID.

Click the radio button labeled "This Document Only" to include your new style in the <style> tag on this page, and then click OK.

In the Style Definition window, specify the CSS definitions you want to use (see "The CSS Editor" in this section).

You can click Apply at any time to view the document window and see the changes you are making.

After you define all the CSS rules you want to use, click OK to return to the document window.

If you set up any classes, use the CSS Styles palette to set the class for a selected object in the document window (Figure 19.8).

Figure 19.8. Two styles have been added. The first (bodycopy) is embedded in the file, and the second (sidecopy) is in an external file, as shown by the small chain link next to it.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint