Links
With normal HTML about the only control you have over links is the color of the text for the various states of the links. Not true with CSS. Pretty much everything you've learned to this point can be applied to the different link states. This includes different fonts and font sizes as well as text and background color. You can get rid of the default underline of links or have it apply to a particular state of the link if you wish. Heck, I've even had the background image of a link change with the states though this did not render correctly with every browser so I abandoned its use.
Since the link's anchor (<a>) tag has four different states to it and the styles must be applied to each of these different states to be effective, each of these states is considered a "pseudo-class". The four states or pseudo-classes are as follows:
- a:link - an unvisited link
- a:visited - a previously visited link
- a:hover - a link when the mouse is held over it
- a:active - a link that has been activated by clicking it
The colon (:) designates a pseudo-class for the selector(the anchor <a> tag). It's also a good idea for me to note at this point that the hover state should be listed after the link and visited states and the active state should be listed after the hover state. Failure to do it in this order my make some of the states ineffective. You also don't have to create a style for all of the states if you wish. Many people don't use the active state at all since it may only be visible for a brief time.
It's considered good practice to declare the same style for each state even though that style should be inherited from the previous state, sometimes this may not be true. For example declaring text-decoration:none; in the link state should remove the link underline from all the other states, it may not in all situations. So declare it in all the states just to be sure. That is if you want the same style in all states. Just remember because of inheritance, if you declare a particular style for say, the visited state, that style will probably apply to the hover and active states unless you change it in them also.
color:red;
}
a:visited{
color:green;
}
a:hover{
color:blue;
}
a:active{
color:yellow;
}
The code above is an example of a simple links style rule that will give a color change for each of the different states. Color changes are nice as they give the viewer some feed back that something can happen/is happening/has happened. As you probably already noticed, this is what I used with my links here to let you know they are links since I removed the default underlining from all the states. Declaring your link styles this way will make all your links on the page(s) the rules are applied to appear this way. But what if you don't want all the links on your page to have the same styles. What if you what different styles for links in different section of they page such as what I have here with the different fonts/sizes/colors in the different sections? Well then just move on to page two.
