How to Create a New Tag Style in Adobe Dreamweaver CS6 - dummies

By Jennifer Smith, Christopher Smith, Fred Gerantabee

Creating a tag style (or type selector) in Adobe Dreamweaver CS6 is a simple and safe route for new users to understand CSS because it targets existing HTML tags, such as P, H1, and H2.

Using existing tags on your page, you can choose to apply automatic formatting wherever certain HTML tags are used. For instance, you can make any text inside of an <h1> (Heading 1) <strong> tag automatically bold, 36 pixels, and red.

To create a tag style with the Property inspector, follow these steps:

  1. Open an HTML page that contains text.

  2. On the Property inspector, click the HTML button on the left side of the panel to display the Property inspector in HTML view.

  3. Select a line of text and bold it by clicking the B button located in the Property inspector.

  4. Switch to CSS view of the Property inspector by clicking the CSS button on the far left side of the 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.

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

  6. 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.

    The New CSS Rule dialog box appears.

    The New CSS Rule dialog box.

  7. 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 a selected HTML tag on the page. Tag styles automatically are applied wherever that element appears on the page.

  8. Click 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.

You can further refine this new tag style by selecting any bold text and continuing to modify text properties from the Property inspector.

The CSS Rule Definition dialog box.

If you’d like to edit and fine-tune the rule you’ve created, you can click the Edit Rule button below the Targeted Rule drop-down list to open the CSS Rule Definition dialog box. This dialog box opens by default to the Type category, where you can modify type-related properties.

When you’re finished fine-tuning your tag style, click Apply at the bottom of the dialog box to see your changes. You can also click OK to apply your changes and exit the dialog box.