Tutorial for CSS in Dreamweaver

Using Cascading Style Sheets (CSS).

Cascading Style Sheets (CSS) is an advanced form of HTML webpage coding that provides increased design and formatting options. Instead of applying individual snippets of HTML code to each text block or section on the page, CSS allows you to define "style" rules and classes, similar to style sets in word processing and page layout software. You can then apply the styles to elements on your pages---making formatting quicker and easier, as well as ensuring uniformity throughout the page or an entire website. Dreamweaver's built-in CSS feature seems complicated at first, but not after you've tried it a few times.

Things You'll Need

• Adobe Dreamweaver CS1 or later

Instructions

Using CSS in Dreamweaver

1. Start a new Dreamweaver HTML document or open an existing document where you want to create CSS rules.

2. Go to the Properties panel and click the "CSS" button located on the left side of the panel. This puts Dreamweaver in CSS mode.

3. Click the "Targeted Rule" drop-down in the Properties panel and choose "<New CSS Rule>".

4. Click the "Edit Rule" button in the Properties panel. This opens the New CSS Rule dialog box where you name your new style rule and define its behavior.

5. Click the "Selection Type" drop-down. There are four options on this drop-drop, which have descriptive names explaining what they do. For example, "Class (can apply to any HTML element)" allows you create a style class you can apply to any text in the document. "Compound (based on your selection)" lets you create a style class based on text you select before clicking "Edit Rule."

6. Click in the "Selector Name" field and type the name your style. Depending on what Selection Type you chose in the previous step, certain types of style rules require specific naming conventions. For example, "Class (can apply to any HTML element)" requires that the style name start with a period (.). So, if you are defining a heading style, for example, you could name the first heading level ".h1." You could name body text ".body". Dreamweaver will prompt you if your naming convention is wrong, and provide you with an explanation of how to name the style.

7. Click the "Rule Definition" drop-down and choose how you want Dreamweaver to apply the style. There are two options: "This document only" creates the style tags in the HTML Head section of the current page. The styles are available for only this page. "(New Style Sheet File)" creates an external CSS (.css) file.

   The power of CSS is that you can format several pages---an entire site---based on the same set of CSS rules. This is achieved with external CSS files. If you choose "(New Style Sheet File)," when you click "OK" in this dialog box, Dreamweaver prompts you to name the CSS file. If you're using only one CSS file for the entire site, the standard naming convention is "styles.css." However, a site can have many style sheets---one for headers, another for footers, sidebars. Give your CSS files meaningful names.

   After you create your first CSS external file, the next time you open New CSS Rule, the file displays in the Rule Definition drop-down. When you create another style, make sure you add it to the appropriate external CSS file.

8. Click "OK" to display the "CSS Rule Definition for..." dialog box. This is where you format your style, such as font, size, style (bold, italic), color. The options here are extensive, allowing for rather elaborate formatting, including text boxes, backgrounds and many other formatting choices. Set all the desired formatting for this style, and then click "OK."

9. Repeat this process to create additional style rules. To apply a style to a block of text, simply click in the paragraph, and then choose the desired style from the "Targeted Rule" drop-down in the Properties panel.

Tips & Warnings

• Dreamweaver comes with several predefined CSS templates. You can start with one of these, rather than creating all your styles from scratch. Click "File" on the menu bar and choose "New." This opens the "New Document" dialog box. Click "New from Sample" in the left column, and then choose "CSS Style Sets. Then, choose one of the templates in the right column.

• You can change style formatting at any time with Edit Rule. When you change a style, all the text tagged with the style rule in the document--or site, when you use external CSS files--will change automatically.

• When upload your pages to the Internet, make sure you also upload your external CSS files.

References

• W3C: Cascading Style Sheets
• Adobe Developer Connection: Getting StartED with CSS
• Adobe Developer Connection: Learn to work with CSS