Tag selector

The first thing I’m going to discuss is the Tag Selector.

I have a new site for these lessons, the site Bonzai_01. When you download them you can see the different steps.

Let us first see what we already have.

At the top we find the welcome title that uses the H1 header.

To the right, we have a logo. And below we have a navigation menu.

And last we have some links on the right.

This page is linked to the external CSS style “mystyle.css”, found in the folder “CSS_Styles”.

The only thing it currently contains is a style for a: link, a: visited, a: hover and a: active.

We will add a style tag for the background color and text, and then
for Heading1 and Heading 2.

Just click the “New CSS Rule” button at the bottom of the “CSS” panel.

This opens the “New CSS Rule” dialog.

I select the “Tag” selector. The first rule I’ll add is actually the background color.

Click the downward pointing arrow next to the box “Tag” and choose “body” in the drop-down menu.
In the “Define in” I choose an existing css file “mystyle.css”, because I want to add the new line to the existing css file.

Click OK.

This opens the dialog “Definition of CSS rule …”.
In the “Type”, I set the font, font size and font color.

In the “Background”, select a color by clicking on the color picker and when the mouse pointer changes to an eyedropper, place it over the background color of the logo, because I want the background color of my page to be the same as the background of my logo and click.

This will automatically fill the color code in the “Background Color”.
This is the only thing we change so click the OK button.

As you can see the page that is linked to the CSS style is updated immediately.
But as you can see at the top of the tabs of the various documents, only just the CSS file modified, not the linked page.

You can see by the * sign right next to the filename. When this appears, this means that the document was modified but not yet saved.

Select the CSS file and save it when you are satisfied.

The linked pages are visually changed but nothing changed in the source. It is still linking only to the mystyle.css file.

Ok, the second thing that we’re going to change is the heading 1 and heading 2.

In order to work a bit quicker, place the cursor in your document in the text where heading 1 is applied.

Click the “New CSS Rule” button at the bottom of the “CSS” panel.

This opens the “New CSS Rule” dialog.
As you can see in the image below, Dreamweaver has automatically filled the box with h1 tag, this is for Heading1.

Dreamweaver does fill this automatically for us, because we had placed the cursor in the text that was provided with the heading 1 format.

If for some reason it has not been filled, you can still select the tag by clicking the downward pointing arrow button.

In the “Define in” box, choose the css file you want to add the extra line.
Click the OK button.

This opens the dialog “Definition of CSS rule …”.

In the “Type”, we will give a different color to the text. In this example I’m going for a darker khaki.

This is not an image, but I think you know that.

We repeat this process for heading 2.

Place the cursor in your document in a text area where they are being used.

Click the “New CSS Rule” button at the bottom of “CSS”panel.

In the dialog that appears, it has already completed the h2 tag.

The “Define in” box is still set to “mystyle.css”, which is good.

So click the OK button.

In this example I give a lighter color for this tag (h2) and click OK.

Immediately the page with the attached CSS style changes accordingly.

Both lines are also added to the CSS file, which you obviously need to save in the CSS Styles panel.

Featured Courses

• Downloading iPad Apps
• Lesson 1: Introduction to Publisher
• Lesson 65: File Formats