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 #59

How can I have multiple link styles on a single page?

The Answer

Prepared Jul. 2001 by Gerry Jacobsen, PVII

A little creativity with your selectors will do the trick. The idea is to tie multiple sets of selectors to custom styles. You then apply the custom style to the parent element that contains the links that you want to be different.

Here's an example from one of our Project VII style sheets. The first 4 selectors are the defaults for all links on the page.

Any links contained in an element to which .sidebar is applied... will pick up the .sidebar selectors(the last 4 styles). You can do as many of these as you like.

a:link {
  color : #666699;
  }
a:visited {
  color : #333366;
  cursor : w-resize;
  }
a:hover {
  border-color : #666666;
  color : #666699;
  }
a:active {
  color : #336699;
  }
.sidebar {
  color : #FFFFFF;
  font-family : Arial, Helvetica, sans-serif;
  font-size : 12px;
  }
.sidebar a:link {
  color : #333333;
  }
.sidebar a:visited {
  color : #666666;
  cursor : w-resize;
  }
.sidebar a:hover {
  color : #FFFFFF;
  }
.sidebar a:active {
  color : #333333;
  }

For a more detailed discussion, have look at our free PVII Link Styles Tutorial

Back to the questions list