How to Create Styles with Class and ID Selectors in Dreamweaver - dummies

How to Create Styles with Class and ID Selectors in Dreamweaver

By Janine Warner

Class and ID selectors in Dreamweaver have many similarities and one key difference. ID styles can only be used once per page but class styles can be used as many times on the same page as you like.

Class and ID styles have the following similarities:

You can name styles created with the class and ID selectors anything you like. You should not include spaces or special characters in style names, although the underscore and hyphen are okay. The use of all lowercase is a common but not required practice.

You can apply class and ID styles to any element on a page, but they are most commonly applied to header tags, div tags, unordered list tags, paragraph tags, image tags, and the new HTML5 tags.

Using styles created with the class and ID selector is a two-step process. First, you create a new style using the class or ID selector and give it a name; then you apply the style to an element on the page.

To define a new class or ID style, create and save a new document or open an existing file, and then follow these steps:

1If you're defining a new style you want to apply to an existing element, click to place your cursor over the element that you want to format with the new style.

Although this step is not required (you can create styles for elements that are not yet on the page), Dreamweaver automatically creates selector names based on the page element that your cursor is currently selecting.

2In the Selectors panel of the CSS Designer panel, select the name of style sheet to which you want to add the new style.

If you want to target the style to a specific media type or screen size, define a media query in the @Media panel.

If you don’t specify a media query, Dreamweaver will use the Global property and your style will work in all media formats and screen sizes.

3In the Selectors panel, click the plus sign (+).

A new selector is added to the Selectors panel. Dreamweaver has added a compound selector name, which includes all the styles already applied to the headline where your cursor was resting when you started to define the style.

4Double-click the selector name, and edit or replace it with the name you want to use for your style.

You can name class and ID styles anything you like, as long as you don’t use any spaces or special characters other than the hyphen (-) or underscore (_).

If you want to create a style using the class selector, you must begin the style name with a dot, or period. If you want to use the ID selector, the style name must begin with a pound sign (#).

5In the Properties panel, specify the settings in your style rule.

Class and ID selectors are easy to apply to content after you create them because Dreamweaver adds these styles to the Class and ID drop-down lists in the Property inspector, located at the bottom of the workspace.