Using other types of selectors in Dreamweaver.

Let's use tag selector h1 to format header 1 text. In Code view in your index page...

Type the open and closing h1 tags around the phrase "Introduce your site here."

Now make a new CSS rule for the h1 tag. Place your cursor...

...Inside the h1 tag...

And right-click on the CSS panel.

Select New.

The Selector Type should be tag and the name should be h1.

Make sure you are saving in the styles.css file, and click OK.

Now make formatting choices for your h1 text, such as font family, size, and color.

Click OK.

Let's next use a descendent selector where rules will apply in only certain circumstances. First, create a link be selecting the "Questions?" text.

Select Insert > Hyperlink.

Browse to the Contact page to complete the link.

You will see that the Questions? link is now blue and underlined, the default formatting for the <a>, or links, tag.

Back in Code view, place your cursor inside the <a> tag, then right-click on the CSS panel.

Select New.

The Selector Type should be tag, and the Selector Name should be "a."

Click OK.

Now make some attribute changes such as a red, bold font.

Click OK.

In Design view...

Notice we have changed the appearance of all the links including the Contact link in the navigation bar. But what if we don't want the navigation bar links to be that color? Let's use decendent selectors to specify characteristics for only links in the navigation bar.

Select the "Contact" text in the navigation bar.

Right-click to create a new rule.

The Selector Type should be Compound, and the Selector Name should be "navbar a."

Click OK.

Now create new attributes for the navbar links such as bright blue text with no underline.

Select OK.

Save your work by selecting File > Save All.

Select F12 to preview in a browser.

Using decsendent links, you have now created rules for links in general, as well as specific rules for links in the navigation bar.

Let's look at class selectors next.

Select the first "Register here" that you wrote in the main content area.

In the Properties panel, make sure the CSS button is selected, and press Edit Rule.

Choose Selector Type Class, then write a name for a new class selector. In this example we use a descriptive name like "bold border."

Click OK.

Now create the rules for the bold border selector.

In the Border category, choose a black border, Style solid, and Width medium.

Choose Background blue.

And Type color white.

Click OK.

In Design view you can see the selected text is now changed.

We will apply the bold border style to other places in the page.

Select "Register here" in the third line on your page.

Then, in the Targeted Rule dropdown box in the Properties panel, choose bold border.

Your text should automatically change in Design view. Finally, let's make a pseudo-class selector. These are helpful for changing the appearance of links on your page when they are hovered over, clicked on, etc. First make a new CSS rule in your CSS Styles panel.

Choose Selector Type Compound.

Then use the dropdown menu to choose selector name "a:hover."

Select OK.

Now choose the attributes such as text green for whenever a mouse hovers over your links.

Select OK.

Select File > Save All to save your work.

Now preview your work with File > Preview in Browser, or just press F12.

You have set up a pseudo-class selector. The "Questions?" link will change when you hover, but not the navigation bar link.