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.

----------------------------------------------------
– 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:
http://www.elitewebstrategies.com - Empowering You to
Empower Your Business. Copyright 2007 Larry Lang All Rights
Reserved. Lang Enterprises Inc.