Recipe 1.17. Using CSS in Adobe Dreamweaver

Problem

You use Dreamweaver for creating and editing web pages and want to use its CSS features.

Solution

Use the CSS Styles Panel to create, edit, delete, and view CSS styles (see Figures 1-40 and 1-41). You have several ways to work with styles sheets. While editing an HTML page, you can attach an external style sheet through the CSS Styles panel or start a new CSS document (click FileNew and then choose Basic page and CSS).

Figure 1-40. Start a new CSS file in Dreamweaver

Figure 1-41. Enter and edit styles in Dreamweaver's CSS document

Another option is to use the Code or Split view and enter the CSS directly into the code for inline and internal style sheets.

To attach an external style sheet to any web page in Dreamweaver, click the Attach icon on the CSS Styles Panel (see Figure 1-42).
Click FileNew and choose Basic page and CSS to start a blank CSS document.
Enter styles in Code view.

You can view CSS properties by categories, such as font, background, and border. You can switch to List view, an alphabetical list of properties.

Figure 1-42. Use Dreamweaver's CSS Panel to attach an external style sheet

Discussion

If you add styles to content within an HTML page in Dreamweaver, using Properties, the application automatically adds inline CSS (see Figure 1-43). As you select fonts and color to selected text, Dreamweaver creates an internal style sheet rather than use font element. In older versions of Dreamweaver, the code would look like the following:

Figure 1-43. Dreamweaver automatically creates new styles when assigning font and colors to text

<font face="georgia, times new roman, serif" color="#ff0000"  size="2">This is text.</font>

You can review the style sheet generated by Dreamweaver (see Figure 1-44).