Pseudo-class selector

And finally we have the pseudo-class selectors, including those found among the advanced type.
With a pseudo-class, the style of an element depends the state of that element. Do you remember lesson 19 where I talked about a:link, a:visited, a:hover and a:active.

However, the “a” stands for the anchor tag and the “:link”, “:visited”, “:hover” and “:active’ are pseudo-classes.

It is easy to add a pseudo-class selector to your CSS rules.
Click the “Add New CSS Rule” button at the bottom of the CSS panel.

Choose “Advanced” as the type and click the empty box.
This opens a drop-down menu with all four different pseudo-classes.

Choose a class and click the OK button.

In the “Definition of CSS rule”, you can specify the layout of your link for this state of the pseudo-class and click OK. For example under the category “Type”, change the text color.
Click the OK button.
Repeat for each pseudo-class.
When you put your page in your browser window and when you move your mouse pointer over a link, you will see that it changes color.
That’s easy.

In this lesson, we go a little further.

I want all the text links in the right column (the #RNavigation id that I mentioned in the previous lesson) of my page to look like buttons, without using images, but just by using CSS.

We start with the “New CSS Rule” button at the bottom of the CSS panel.
This opens the “New CSS Rule” dialog.
In the “Selector”, I type the name of the id, #RNavigation, because it is where my text links are located, followed by a space and the letter “a”.
This means that all the anchor tags in the cell with the “#RNavigatie” id will be selected with this selector.
Click the OK button.

In the “Type” of the dialog box that appears, we choose the “decoration” as “none” and give the color as something else.

The next thing we change is in the “block” category.
In the “Display”, select “block” from the drop-down list.
This will display the various links among themselves.
If, for some reason, you find that you want to display them side by side, then choose “Inline”.

Then we choose the “Box” category.
Check the boxes “Same for all” for the “Padding” and “Margin” columns and enter a value for both in the “Top” box.
This will provide some space between and around the links.

Then we choose the “Border” category.
If the checkboxes for the “Style”, “Width” and “Color” columns are checked here, click to uncheck them.
In the “top” of the “Style” column, we give the style of the line that we wish to link. I have chosen for “continuous”, but if you prefer stripes or dots, the choice is yours.
In the “width” column, you can specify a value for the width of the line.
And in the “Color”, you give the color you wish to use.

I do the same for the “Bottom” box.
If you wish to have a line to the right or left of the link, go ahead.

 

When you’re done, click the OK button.

Now we create a second CSS rule, one that will determine the color when we hover over the buttons.
So, click again on the “Add New CSS Rule” button at the bottom of the CSS panel.

In the “Selector”, we type the name of the id again, # RNavigation, followed by a space and the letter “a”, but now we determine the state of the link, that is “:hover”.

The broad meaning here is, when you’re in the cell with the id #RNavigation and the mouse pointer moves over a link, the rule that we created will be implemented.
Do you still follow?
Click the OK button.

 

For this rule, I just want to change the background color, so I choose the “Background” category and choose a different color by clicking on the color picker.
When you’re done, click the OK button.

In Design view of Dreamweaver, we see little of what all we have just made, we only see the various links.

But when we view the page in our browser window by clicking the F12 key on your keyboard, you notice that the links now have quite a way of buttons.

 

Featured Courses

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