CSS in Dreamweaver Tutorial: Adding CSS Styles to HTML Pages

CSS in Dreamweaver Tutorial: Adding CSS Styles to HTML Pages
Page content

Two Ways to Add CSS Styles in Dreamweaver

Macromedia Dreamweaver offers rich functionality for CSS users. In addition to being able to create CSS files and add or edit CSS styles straight from the Dreamweaver CSS palette (as discussed in Part 1 of this tutorial series), Dreamweaver also makes it very easy to apply those styles to various parts of your HTML page. Whether you want to incorporate styles that have been custom-created in your own CSS style sheet or apply new CSS styles on a page-by-page basis, Dreamweaver can accommodate.

Applying CSS Styles On-the-fly

With the later versions of Macromedia Dreamweaver, many of the font attributes available for text in your HTML page have been incorporated into in-coded CSS styles automatically added to the “head” section of each page once you make your attribute choices. The benefit of this method of CSS styling is that it allows you to choose your font attributes only once for each specific page. Then, your choices are coded as a CSS style that is available in the style drop-down menu of the Dreamweaver Properties window. It’s as easy as making your choice of font color, size and typeface, as well as the appearance of bold, italics, etc. When highlighting various text areas of your page, simply select a previously used style from the drop-down menu. This feature save the time of making the same color or size selections many times and also helps keep visual consistency through the entire page. The styles created on-the-fly can also be edited in the CSS Styles window if you decide to make a change that you would like to be filtered throughout all the text on a single page. The drawback to this method is that specific styles only apply to the single page they were created in. To use the same CSS styles through multiple HTML page, Dreamweaver’s method of attaching CSS files to an HTML page is the better option.

Applying CSS Styles through a File Attachment

The second method Dreamweaver offers for applying CSS styles within an HTML page begins by actually linking a Dreamweaver custom-created CSS file to your basic HTML document. With your HTML page open, choose Text > CSS Styles > Attach Style Sheet. The dialog box allows you to browse for your “.css” file and select to “attach” it to the designated page. (HINT: If you’re using the Dreamweaver Templates feature, attach your stylesheet on the template file first to ensure the styles will be available to all updated pages with just one click.)

Once your CSS file is attached to the HTML page, the various styles in the file will be shown in the “rules” list in the upper portion of the CSS Styles Dreamweaver window. Both the in-coded styles and attached styles will be shown in lists you can open and close. From the properties palette in the lower portion of the window, you can easily make changes to styles from your attached file by selecting the appropriate rule. When a change is made to a style, Dreamweaver will automatically open the corresponding CSS file and update the code. Then, you will have the option to save it upon closing. Changes made in the CSS Styles window are immediately seen in the “design” window view of your page, and all styles in the attached style sheet file will appear in the “styles” drop-down menu. As with the in-coded styles, CSS styles from the attached style sheet can be applied to various page elements simply by highlighting the element and selecting the desired style from the drop-down menu.

Parts 3 and 4 of this Dreamweaver CSS Tutorial series offers an overview of the text and link functions available through the Dreamweaver CSS rules palette.

This post is part of the series: Tutorial of CSS in Dreamweaver

This tutorial provides easy-to-follow steps for using CSS in Dreamweaver. Part 1 offers an overview of how CSS files are created and the types of CSS styles available. Part 2 explains the two ways Dreamweaver incorporates CSS into HTML, and parts 3 & 4 highlight CSS attributes for text and links.

  1. Dreamweaver CSS Tutorial: Creating CSS Styles
  2. Dreamweaver CSS Tutorial: Adding CSS Styles to HTML Pages
  3. Dreamweaver CSS Tutorial: Setting Text Attributes
  4. Dreamweaver CSS Tutorial: Setting Link Attributes