Proper Link Placement in CSS:
In this tutorial, I will walk you through customizing text links using a css stylesheet.
When you visit a website, any link, or href, is treated speical. That is, it has three views. These views are link, visited, & hover. Lets break these down into detail:
Link:
This refers to text that is a link. It is offering a url to another website that you can view by clicking on the text.
Visited:
This refers to a link that has previously been viewed. Not necesarrily by the link that is on the current page.
Hover:
This refers to the action taken when a mouse pointer is guided overtop of the text link being offered on the page.
Here is an example of a standard text link:
CODE
<html><body>
<a href="http://www.google.com">Google</a>
</body></html>
If you are using Internet Explorer, & have not been to google.com, then the text link should show up in blue text. If you have previously loaded the page at google.com, then the link will be in a purple. Hovering over the text link in either case will not produce any special effects.
However, using the following code in a css:
CODE
a:link {
color: red /*The color of the link*/
}
a:visited {
color: #800080 /*The color of the visited link*/
}
a:hover {
color: green /*The color of the mouseover or 'hover' link*/
}
with our previous example:
CODE
<html><head>
<link rel=stylesheet href='stylesheet.css' type='text/css'></link>
</head><body>
<a href="http://www.google.com">Google</a>
</body></html>
will produce a custom text link!
It is important to use these properties in the correct order. If you load hover prior to visited, & the site has not been previously viewed, you'll see the hover work correctly, because the visited condition is false. However, once you view the site, you'll quickly realize that your hover is going to be hidden by the visited. The viewers web browser will load the hover effect prior to loading the visited. So again, placement & order are both very important!
Proper Link Placement in CSS:, Creating Text Link Effects using CSS
3 Jan, 2008 - 02:47 PM
| 