Just as I would make anything altered in my style/css, I can have my links look a certain way, too. For a start, let's look at this:
a {font-family: arial; font-size: 10px; color: #000000;}
But this is so plain. It only is basic arial font, size 10, and the color black. Can we edit more of it? Make it different when you hover you mouse over it? We can do a lot more to it. You first need to learn about font elements.
Font Elements
a:link = This is just what a link looks like on your page. You haven't clicked it, you haven't been there, you don't have your mouse on it. It is just there.
a:active = This is once you have clicked it or have it selected.
a:visited = This is when you have visited that url or link.
a:hover = This is when you currently have your mouse hovering over the link.
These elements can be used to note if you want differences in these 4 different elements. Now let's make them into a part of our style sheet.
Links In Our Style
So let's use our basic link but add it up for all 4 font elements.
a:link {font-family: arial; font-size: 10px; color: #000000;}
a:active {font-family: arial; font-size: 10px; color: #000000;}
a:visited {font-family: arial; font-size: 10px; color: #000000;}
a:hover {font-family: arial; font-size: 10px; color: #000000;}
Um.. boring? Well before we go even further.. let's combine a few of these up. Now I am not sure about you, but I always make my link, active, and visited the same. Then just let the hover be different. So if you want to do that, we can combine them up. So this is what it would look like.
a:link, a:active, a:visited {font-family: arial; font-size: 10px; color: #000000;}
a:hover {font-family: arial; font-size: 10px; color: #000000;}
Now we need to decide what our basic link would look like and then what our hover would look like. Before we do that, we should learn about a few things we can do to alter the appearance.
Altering The Look
Well there are so many different alterations we can make. So let's break it down with some of the most common.
Color
In our code already we have something that says "color: #000000". The #000000 is a hex code. All you need to do to change the color is change the hex code.
Font-Family
Again this is in our code already. You can change "Arial" to another font if you would like. Don't use one you've downloaded cause it would end up not looking the same for everyone if they don't have that font. Some common ones are arial, tahoma, and veranda.
Font-Size
Again this is in our code already. You can change "10px" to another number if you'd like to. You can also use some different types of alterations, such as: x-small, small, medium, large, & x-large.
Font-Style and Font-Weight
Just like you can bold, underline, etc to normal text, you can add that to your links. Now weight is defined by things that alter the thickness of the font. That means when you want to "bold" your text you need to add that to your font-weight. If you want to underline it, then you need to use font-style.
For Style: add this code to your code. Make sure every different piece of coding ends with an " ; ".
"font-style: underline;"
For Weight: add this code to your code. Make sure every different piece of coding ends with an " ; ".
"font-weight: bold;"
Text-Transform
Text-transform just alters the way the text looks. Like you could make it all in capitals or all lowercase on a hover. It can add some pretty cool effects. You can use "uppercase" or "lowercase".
Code: add this code to your code. Make sure every different piece of coding ends with an " ; ".
"text-transform: uppercase;"
Text-Decorations
Out of all the things you can do to your text this is my favorite. These really make a difference in your text. I prefer to use them on hover. Some common ones are: "underline", "overline", and "line-through".
Code: add this code to your code. Make sure every different piece of coding ends with an " ; ".
"text-decoration: overline;"
Background-Color
Just add a background-color to it by changing the hex code.
Code: add this code to your code. Make sure every different piece of coding ends with an " ; ".
"background-color: #FF66FF;"
Letter-Spacing
You can add some space between the letters for a link or a hover. Use px.. so 1px space, or 2px, 3px, etc.
Code: add this code to your code. Make sure every different piece of coding ends with an " ; ".
"letter-spacing: 1px;"
Cursor
You can change the cursor for links or for hovers. The different cursors are: auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, and help.
Code: add this code to your code. Make sure every different piece of coding ends with an " ; ".
"cursor: crosshair;"
Afterword
Now that you know how to alter, test it out! There are so many different things you can do to alter the way your links work. The more creative they are, the more exciting it will be for your page!