Jump to content

Links


TheFilmGod

Recommended Posts

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!

Link to comment
Share on other sites

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>

 

 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.