Links

[TheFilmGod]

I got to the point in coding where I want to change the different properties of links. a, a:hover, a:active,...

 

When I do that in css I create a class for a group of links called "name."

 

In the html page, I have these links all over the page. Some on the end some in the beginning... but these aren't the only links. So how can I apply this class to a link. For example:

 

<a href="#">Someone's Name</a>

 

How would I use html to apply that class to this link? Remember, I'll be doing this multiple times...

 

Thanks for your help!

[monkeytooth]

I think this page may help you out a little..

 

http://www.echoecho.com/csslinks.htm

[dbrimlow]

The key to css is to "Do it once in the stylesheet and forget it"!

 

So, first (as you may already know) for links you need to start with your default "tag" level page links. These don't require any class and will be used for any link on the page (unless told otherwise via class or inline style).

 

They must be in the proper order, which is LVHA (aka LoVeHAte):

 

a:link, a:visited, a:hover, a:active

 

These are called pseudo-elements because they are modifying the "a" anchor.

 

So in your stylesheet designate your default links as follows:

 

a:link, a:visited {color:#0000FF; background-color:#FFFFFF; text-decoration: none}

a:hover, a:active {color: #FFFFFF; background-color:#0000FF; text-decoration: underline}

 

Now whenever you use any

<a href="#">Someone's Name</a>

it will use the default.

 

Now for specific classes and/or ids you simply do the same only using the class/id selector before it:

 

.name a:link, .name a:visited {color:#000000; background-color:#800000; text-decoration: none}

.name a:hover, .name a:active {color: #FFFFFF; background-color:#000000; text-decoration: underline}

 

You call it individually like this:

 

<a href="#" class="name">Someone's Name</a>