HTML and CSS —

Multiple Link Styles Using Class Selectors

Another fantastic option made available via CSS is the capability to have more than one style of links per document. This is especially helpful when you have areas on a page with distinctly different features than other areas of the page. A perfect example is a navigation area with a blue background, and a content area with a white background. If you wanted white links on the blue background, it clearly couldn't work within the white content because the links would be invisible.

You can approach multiple link styles in a few ways, including creating separate classes. You could have basic link styles for the default and content areas, and you could set up a special class for the navigation area.

Example: Using classes to create multiple link styles

/* default link styles, appropriate for content area */
a {color: orange; text-decoration: none;}
a:link {color: orange;}
a:visited {color: yellow;}
a:hover {color: fuchsia;}
a:active {color: red;}

/* classed link styles, appropriate for navigation area */
a.nav {color: white; text-decoration: none;}
a.nav:link {color: white;}
a.nav:visited {color: yellow;}
a.nav:hover {color: orange;}
a.nav:active {color: fuschia;}

You would then apply the class="nav" attribute within those links that you'd like to apply the class to:

<a class="nav" href="http://www.domain.com/">domain.Com</a>

I've created an HTML file with two sections to represent content and navigation areas, and applied the class to the link in the navigation area.