Article Directory :: Internet Marketing/Online Business Articles

Using Hyperlinks and CSS in Your Website

By Larry Lang

Republish: EasyPublish™ Published: 02Aug2007 Word count: 556 Viewed: 364 time(s) Get Free Content For Your Site

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: Elite Web Strategies 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.

EasyPublish™ this article - publishers click here

More articles by Larry Lang

Free Report!
Ten Essential Secrets Of Article Marketing ... Grab Your Free
Copy Now:

Need Content?
Regular Top Quality Content for your Blog, Ezine or Website ...
Delivered Direct,
For Free!
Click For Details