25% off Hosting at HostGator.com:
Use Code techbits25

What order must I specify link styles in my css?

Last updated: 06/30/2009

Getting links to look right in html / css always seems to be troublesome. I found out that this is the order you should specify link styles:

a:link
a:visited
a:hover
a:active

So an example might be:

.xlink a:link {
 font-family: arial;
 font-size: 11px;
 font-style: normal;
 line-height: normal;
 text-decoration: underline;
 color: #BFBFBF;
}
 
.xlink a:visited {
 font-family: arial;
 font-size: 11px;
 font-style: normal;
 line-height: normal;
 text-decoration: underline;
 color: #BFBFBF;
}
.xlink a:hover {
 font-family: arial;
 font-size: 11px;
 font-style: normal;
 line-height: normal;
 text-decoration: underline;
 color: #BFBFBF;
}
.xlink a:active {
 font-family: arial;
 font-size: 11px;
 font-style: normal;
 line-height: normal;
 text-decoration: underline;
 color: #BFBFBF;
} 
I also noticed that I had to wrap my links with a <span> tag like so: 
<span class="xlink"><a href="/hello.html">Click here</a></span>
to get things to behave properly.

blog comments powered by Disqus

Have your own Tech-bit to contribute? Submit it here

Other questions in this category:

	How do I set up a meta-refresh in html?
	How can I open a new window using Javascript?
	How can I slash out a price to denote a sale price in html and php?
	How do I force a page break for printable html documents?
	How can I manipulate table borders in CSS and html?
	How can I disable the right mouse button on my HTML pages? (to discourage copying of images)
	How do I password protect a directory on my website?
	Why do my web forms lose data when I hit the back button?
	I'm seeing funny characters or boxes on my website after upgrading / moving to a new server. How do I fix it?
	Configuring htmleditor to do file uploads using php
	How can I get my article text to wrap-around an image on the page
	How can I make a vertical divider (like a horizontal rule) ?
	How can I make a nicer border for my html tables
	How can I set up a proper 301 redirect with an htaccess file?
	How can I get a "hint" to pop up when I mouseover a link on my site?
	How can I remove indents from my <ul> lists in css?
	Why do I have mce_serialized="1" showing on my website?
	How can I position a <div> element for differing screen resolutions and widths?
	How do I enable SSI (Server Side Includes) on IIS 7.x (1&1 dedicated sever) ?
	IE 7 gives me an "Unknown runtime error" when using ajax - how can I fix this?
	How can I set up css styles so they are easy to remember when I'm coding?
	How can I add a nice rounded edge box around some text?
	How can I make a rounded button using just CSS?

Content provided by Roberts WebForge, Inc.

Technology TidBits

What order must I specify link styles in my css?