a {font-family: tahoma; font-size: 10px; color: black;}
This will make your link black, size 10 and uses the font tahoma. But what happens when you click on it, and what's that horrible line constantly underneath your links?
The above was just the basic link element. The real deal is made up of 4 link elements.
a:link - This is your general link. It doesn't have to lead anywhere. As long as you have <a href=""> somewhere, your link will be defined by this tag.
a:active - This is a link that actually goes somewhere. The URL actually exists and people who click on it will go to a new page.
a:visited - This is a link you have already clicked on and seen the page where it leads to.
a:hover - This is when you hover your mouse over a link.
So now your stylesheet should look like this:
a:link {font-family: tahoma; font-size: 10px; color: black;}
a:active {font-family: tahoma; font-size: 10px; color: black;}
a:visited {font-family: tahoma; font-size: 10px; color: black;}
a:hover {font-family: tahoma; font-size: 10px; color: black;}
But how boring and repetitive is that? Most of the time, your links should be active, so combine a:link with a:active and now you've got something much neater:
a:link,a:active {font-family: tahoma; font-size: 10px; color: black;}
a:visited {font-family: tahoma; font-size: 10px; color: black;}
a:hover {font-family: tahoma; font-size: 10px; color: black;}
Unless you really want a different color or font for your visited links, you can combine that with the other two as well:
a:link,a:active,a:visited {font-family: tahoma; font-size: 10px; color: black;}
a:hover {font-family: tahoma; font-size: 10px; color: black;}
Much neater :) So now to get on with customizing your link. If your normal text is tahoma and black, why not change your links to verdana and orange? This can be achieved as such:
a:link,a:active,a:visited {font-family: verdana; font-size: 10px; color: orange;}
a:hover {font-family: tahoma; font-size: 10px; color: black;}
You can also make them not underlined but bolded like so:
a:link,a:active,a:visited {font-family: verdana; font-size: 10px; color: orange; text-decoration: none; font-weight: bold;}
a:hover {font-family: tahoma; font-size: 10px; color: black;}
Once you're satisfied with your normal links, it's time to customize your hovered links. Unless you want to change your font or color or size for when you hover your text, you don't need to specify them again. All those properties will remain the same as the ones defined by a:link so no extra coding is necessary. You can change the color of your hovered links, strike-through them, make them all uppercase or change the cursor - it's up to you. This is what I've come up with so far:
a:link,a:active,a:visited {font-family: verdana; font-size: 10px; color: orange; text-decoration: none; font-weight: bold;}
a:hover {color: purple; text-decoration: overline; text-transform: uppercase; cursor: crosshair;}
Now when I hover over my link, it will be significantly different to when I move my cursor away from the link. You can also add a background color, or even a background image to your links like so:
a:hover {background-color: #000000; color: #FFFFFF;}
This will give me a black background with white text when I hover over my link.
Links can also be sepcific for a certain Class or ID, but that is another tutorial altogether.