Creation of New Tag Styles in Adobe CS5 Dreamweaver - dummies

Creation of New Tag Styles in Adobe CS5 Dreamweaver

By Jennifer Smith, Christopher Smith, Fred Gerantabee

Creating a tag (or an element) is a simple route for new Adobe Creative Suite 5 (Adobe CS5) Dreamweaver users to understand CSS. Dreamweaver allows you to work with existing HTML tags, such as P, H1, and H2. Using existing element tags on your page and Property Inspector, you can choose to apply automatic formatting wherever certain HTML tags are used.

1Open an HTML page.

Be sure to choose one that contains text.

2Click the HTML button on the Property inspector panel.

The button is on the left side of the panel. This displays the Property inspector in HTML view.

3Select a line of text.

Bold the selected text using the B button located in the Property inspector.

4Switch to CSS view.

Click the CSS button on the far left side of that of the Property inspector panel.

The goal is to assign definitive style information to the tag that bolds text, so any bold text on the page also appears red.

5Start a new CSS rule.

Leave the bolded text selected, and in the Property Inspector select <New CSS Rule> from the Targeted Rule drop-down list.

6Apply color to selected text.

With the text still selected, use the color selector on the right side of the Property inspector (located below the B and I buttons) to select a red color to apply to the selected, bold text.

7The New CSS Rule dialog box appears.

From the Selector Type drop-down list, choose Tag (Redefines an HTML Element); choose Strong from the Selector Name drop-down list; choose (This Document Only) from the Rule Definition drop-down list.

The selector type determines how the formatting will be applied to elements on the page. Tag styles change the appearance of any element formatted with a specific HTML tag.

8Click OK to create the new tag style and close the panel.

Now, every time you apply the <strong> tag to make bold text (using the B button or other shortcuts), that bold text also appears red. You’ve created a tag style that determines how bold text appears any time it appears in a document.