CSS hover classes

Using CSS link tags and custom classes in Dreamweaver MX

by briggs

So you want to have some interaction on your web page but you want to keep the downloads to a minimum. Using Cascading Style Sheets (CSS) you can get some nice rollover effects for menus without using images or JavaScript.

Added benefits of using CSS are that you can easily change text styles for an entire page or site just by editing one CSS file. Also, by using CSS with templates, you can really tighten up site maintenance.

Here I have two text items I want to link:

Link1

Link2

By just using standard HTML, I can set the text font, and the link color, as well as an active and visited state:

Which gives me this:

Link1

Link2

Functional, but not too pretty. The next thing I can do is to add a CSS tag that will format all my links to a specific font, color, and give them attributes.

First, open your Design pallet and on the CSS Styles tab, click the pallet options, select "New CSS Style..."

Select "Use CSS Selector" for Type, and in the Selector pull down, choose "a:link" For Define In, you can choose to define your CSS style in this document only, or in an external CSS text file that you can link to other pages. In our example, we are going to make an external file.

Click OK, and save your CSS file in your site folder.

Next, you get the CSS Style Definition box, where you can set your attributes.

Lets take a look at the code in the CSS text file:

a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #33FF33;
text-decoration: none;
}

In the <head> of the HTML we now have:

Which links to the text file we just created.

And now I have this:

Link1

Link2

Better, but I want more...

Now I could go back to "New CSS Style..." and this time select "a:visited" but then I have to remember what the attributes I set for the link were. I don't want the font to change to something else when the link is marked visited...

So this time, make sure you have the "Edit Styles" radio button selected on the CSS tab in the Design pallet. Click the "+" sign on the CSS entry you made to expand it and then, right mouse click the "a:link" style. Select "Duplicate..." and set the Selector drop down to "a:visited". Click OK, and you now have a style for the visited link. Double click the style to edit it, and change the attributes for your visited link state.

Now, do the same as above, but select "a:hover" for the Selector.

Now we are getting somewhere:

Link1

Link2

Lets look at the code again:

a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #33FF33;
text-decoration: none;
}
a:visited {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #CCFF99;
text-decoration: none;
}
a:hover {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #FF0000;
text-decoration: none;
}

Note that the order these are in is important. If you set the "a:visited" after the "a:hover", the link may not still get the hover action after a page has been visited as "a:visited" will be applied last.

Now for even more control, I can make a custom CSS class that I can apply in specific places and not in others. This will allow me to have links that react differently on the same page.

To do this, you can right mouse click the "a:link" style. Select "Duplicate..." and set the Selector drop down to "a:link". But this time, add a class to the selector by typing in a period followed by a word that will define the class just after the "a" and before the ":link" for example:

a:link (without a custom class)

a.foo:link (with a custom class of "foo")

Click OK, and you now have a custom class for the link style.. Double click the style to edit it, and change the attributes for your visited link state. Now in the code we have a new entry:

a.foo:link {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #FF00CC;
text-decoration: none;
}

Click back on the "Apply Styles" radio button in the CSS tab of the Design pallet and notice that you now have an entry for "foo". Anything you apply the "foo" style to will get the CSS styles for the "foo" class. Just select a link, and click the custom class in the CSS Styles tab. For example:

Link1

Link2

Link2 now has the "foo" class assigned to it and has a different hover state than Link1.

Take a look at the HTML:

Now I can go back and add "a.foo:visited" and "a.foo:hover" to my Styles. Because they are part of the "foo" class, they will be automatically applied to the Link2 link.

If you want to add the same CSS styles to other pages in your site, just click in the pallet options for the Design pallet and choose "Attach Style Sheet..."

Use as many custom CSS classes as you need. Just remember to upload the .css file you created.

**Please note that to make the different link states work (and for general formatting) I used multiple custom classes that are defined in the head of this document as opposed to an external page. You might want to take a look at the source code to see what that looks like as well.

Enjoy!