How to Define Styles with the Tag Selector in Dreamweaver - dummies

How to Define Styles with the Tag Selector in Dreamweaver

By Janine Warner

You can create completely new styles in Dreamweaver using the call or ID selectors, but you can also create styles that change the formatting of existing HTML tags. These styles are created using the tag selector, which is also known as the element selector. When you define a style using the tag selector, you can alter the appearance, position, and other features of any existing HTML tag.

Many HTML tags already include formatting options. For example, the heading tags include formatting to style text using a large bold font. When you create a style with a tag selector, you have to consider the formatting options already associated with that tag. Any options you define will either be added to the existing formatting or override the formatting.

You may ask, “Why would I redefine the <h1> tag instead of just creating a new headline style using the class or ID selector?” Although you can define a new class style instead of redefining an HTML tag, sometimes using an existing HTML tag is better.

Heading styles are especially important on the web because text formatted in an <h1> tag is well recognized as the most important text on a page. Among other things, text formatted in an <h1> tag may get special consideration from search engines.

To create a style that redefines an HTML tag (such as the <h1> tag) with the tag selector, first create a file or open an existing one and then follow these steps:

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

When you create a style for an existing HTML tag, you don’t need to apply the style itself the way you do with class and ID styles. Wherever you’ve used the HTML tag, the style definition settings are applied.

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

Using media queries with styles is optional. If you do not specify a media query, Dreamweaver will use the Global property and your style will work in all media formats and screen sizes.

3Click the plus sign (+) in the Selectors panel.

A new selector is added to the Selectors panel.

When you click the plus sign (+) to create a new selector, a few things can happen, depending on what’s already on the page open in Dreamweaver. The first time you create a style in a blank web page, Dreamweaver enters body in the Selectors panel.

If you’re working on a page with text or other content that is formatted with HTML tags or styles, Dreamweaver may add a compound selector based on the elements surrounding whatever you’ve selected with your cursor.

4In the Selectors panel, double-click the selector name. Begin to enter the name of the HTML tag, and then select the tag from the drop-down list that appears.

You can enter the name of any HTML tag to create a style using the tag selector. As you type an HTML tag, a drop-down list appears with tags that begin with the same letter you’ve typed. Selecting the desired tag from the list rather than typing the entire tag name yourself is good practice because you avoid typos.

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

The font and color are immediately applied to the text in the page formatted with the <h1> tag.

If you want to be able to use the same HTML tag with different formatting in different parts of the same page, you can create compound styles. Compound styles are handy, for example, if you want text formatted with the <h2> tag to look different in the main part of your page than it does in a sidebar.