Scroll To Top

Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

PVII Knowledge Base

1. Select a product ...
2. Select category ...
3. Search the Knowledge Base...

Question #131

How do I make multiple or different CSS(css) link styles or pseudoclasses?

The Answer

Prepared May. 2004 by Al Sparber, PVII

Using CSS to style hyperlinks is pretty straightforward, whether you use Dreamweaver to create your styles, or even if you do them maually. If you're new to CSS and need to learn the basics of creating a style sheet in Dreamweaver, please see the All About Link Styles Tutorial.

CSS Link Style rules must be written in the following order:

  1. Link
  2. Visited
  3. Hover
  4. Active

The following style sheet will make 2 distinct link styles that can be used in 2 distinct parts of your page:

Area 1

Red text with no underline. Visited turns black. Hover turns Blue and does have an underline. Active is red with no underline.

.area1 a:link {
	color: #FF0000;
	text-decoration: none;
	}
.area1 a:visited {
	color: #000000;
	text-decoration: none;
	}
.area1 a:hover {
	color: #0000CC;
	text-decoration: underline;
	}
.area1 a:active {
	color: #FF0000;
	text-decoration: none;
	}

To deploy this rule, you apply the class area1 to a containing element, like a table cell or a paragraph:

<td class="area1> or...
<p class="area1>

All links within paragraphs or table cells having the "area1" class, will use the styles declared in the "area1" rules above.

Area 2

Blue text. Visited turns red. Hover turns gray with a black background and has no underline. Active is black and underlined.

.area2 a:link {
	color:#0000C0;
	text-decoration: underline;
	}
.area2 a:visited {
	color: #FF0000;
	text-decoration: underline;
	}
.area2 a:hover {
	color: #CCCCCC;
	background-color: #000000;
	text-decoration: none;
	}
.area2 a:active {
	color: #000000;
	text-decoration: underline;
	}

To deploy this rule, you apply the class area2 to a containing element, like a table cell or a paragraph:

<td class="area2> or...
<p class="area2>

All links within paragraphs or table cells having the "area2" class, will use the styles declared in the "area2" rules above.

What about font?

It's best to have your link styles inherit the font used in its parent container. If you are setting link styles for all links that appear in a table cell to which you've applied the "Area1" class, for example, you should allow the links to have the same font characteristics of all the text in that cell. A single rule accomplishes that:

.area1 {
	font-family: Verdana, Arial, Helvetica;
	font-size: 12px;
	}

What if I want just one link in my Area2 table cell to have a different style?

Easy! We need to create a rule that we can apply to the link tag <a> directly, which will take precedence over your other styles.

a.special:link {
	color: #FF0000;
	text-decoration: none;
	}
a.special:visited {
	color: #000000;
	text-decoration: none;
	}
a.special:hover {
	color: #0000CC;
	text-decoration: underline;
	}
a.special:active {
	color: #FF0000;
	text-decoration: none;
	}

To deploy this class, you apply it to the <a> tag, like this:

<a href="page2.htm" class="special">

That's all there is to it.

 

Back to the questions list