Page 1 of 1

Proper Link Placement in CSS: Creating Text Link Effects using CSS Rate Topic: -----

#1 no2pencil  Icon User is online

  • Admiral Fancy Pants
  • member icon

Reputation: 5351
  • View blog
  • Posts: 27,306
  • Joined: 10-May 07

Post icon  Posted 03 January 2008 - 02:47 PM

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:
<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:
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:

<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!

Is This A Good Question/Topic? 0
  • +

Replies To: Proper Link Placement in CSS:

#2 ecdysis  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 17-April 08

Posted 18 April 2008 - 01:56 PM

That was exactly what I did wrong, thank you!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1