Using Hyperlinks and CSS in Your Website

Using Hyperlinks and CSS in Your Website A class is the blueprint from which individual objects are created. In Java, a class is used to show a set of like items.

Here is an example of a hyper link going to a site using a class: <a href="http://www.mysite.com" title="Home Page">Elite Web Strategies</a> a:link { color: #000000; background-color: #ffffff } a:visited { color: #0000ff; background-color: #ffffff } a:hover { color: #0000ff; background-color: #ffffff } a:active { color: #ff0000; background-color: #ffffff } So what is each part used for?

* "a:link" will specify what the hyperlink looks like on the page. * "a:visited" will specify what the hyperlink looks like once it has been visited (clicked on). * "a:hover" shows what the hyperlink will look like when hovered and * "a:active" specifies what the active link will look like.

In the above example you'll also notice both color and background colors are designated. Color indicates the actual color of the font, followed by the hex code for the color you want. The background color is the color behind the text itself, followed by the hex code for that color.

It's important that these hyperlinks are written in the proper order which is why they are put in a class such as above.

CSS Link Specificity - How to Put Your Links in Order

There is an acronym to help you remember the proper order to place your links in. You might think of something to help you remember it easier but some people simply remember LVHA. This simple acronym, LVHA will help you get your hyperlinks in the right order every time.

LVHA stands for:

1. a:link 2. a:visited 3. a:hover 4. a:active

LVHA is the order you should designate your link rules in the CSS so they work together. The way that it is designed to work in CSS, each selector has specificity. So just like anything else in the cascade, if there are two selectors that are both applied to one element, the one with the higher specificity is applied. If you put them in the wrong order, you could end up with a page that isn't showing your style rules as you intended them.

The only two that you can change the order on are the a:link and a:visited (primarily because a link is only either or, never both). You can change many things with links, but always keep in mind that specificity so that they show properly on your page.

Here is an example of a potential problem and how it is corrected.

Problem Order

a:link { color: #000000; background-color: #ffffff } a:visited { color: #0000ff; background-color: #ffffff } a:active { color: #ff0000; background-color: #ffffff } a:hover { color: #0000ff; background-color: #ffffff }

If you use the above CSS, all of it will work except the active rules. Those will not show. This is because the active has to come after the hover to follow the LVHA format. If the active is placed before the hover, it breaks that part of the class.

Simply swapping the places of the active and hover will fix the order of the cascade and allow it to all work.

Correct Order

a:link { color: #000000; background-color: #ffffff } a:visited { color: #0000ff; background-color: #ffffff } a:hover { color: #0000ff; background-color: #ffffff } a:active { color: #ff0000; background-color: #ffffff }

Following the LVHA rules will help you keep your CSS hyperlinks in the right order to comply with W3C.

About the Author:

– Resource Box – This article may be distributed freely on your website, as long as this entire article, including working links and this resource box are unchanged. For more tools, tips, and tricks of the trade, go to: www.elitewebstrategies.com - Empowering You to Empower Your Business. Copyright 2007 Larry Lang All Rights Reserved. Lang Enterprises Inc.