| | |
The pseudo-class was developed to define tags with more than one state. The only tag in HTML that has more than one state is the A (anchor) tag, which has three official states: link, visited, and active.
To define the A (anchor) tag, then, you need to use the pseudo-class, which is marked in a CSS declaration using the colon (:) character to separate the selector and the name of the pseudo-class.
Example:
a:link { color:#0000FF; }
a:visited { color:#FF00FF; }
a:active { color:#FF0000; }
Of course, you can define more than just color using the pseudo-class; you can define any properties you like in the pseudo-class declarations. Don't get any tricky ideas about causing the hyper-reference to get larger while the user clicks during the active state, however; you can't trigger that sort of dynamic behavior with CSS alone.
Due to flaws in early web browser CSS implementations, you must ALWAYS set the pseudo-class for the A (anchor) tag when using CSS (otherwise, early Internet Explorer versions will make your hyper-references the same color as your main text color, making hyper-references and text indistinguishable from one another).
You may also use contextual selectors to define different versions of the A (anchor) tag.
Example:
a:link { color:#0000FF; }
a:visited { color:#FF00FF; }
a:active { color:#FF0000; }
p a:link { color:#000066; }
p a:visited { color:#660066; }
p a:active { color:#660000; }
Be very wary about doing this, however; users are only used to ONE set of hyper-reference colors on a page.
At this time, classes of the pseudo-class are not fully supported, so you can not RELIABLY define true variations of the A (anchor) tag, as you would with normal HTML tags. However, should you wish to do so EVENTUALLY, the syntax required is straightforward. Add the dot (.) after the selector, followed by the name of the class, followed by the colon (:) character, followed by the state of the pseudo-class, then a space and the curly-braces containing the properties.
Example:
a.warning:link { color:#660000; }
a.warning:visited { color:#663300; }
a.warning:active { color:#000000; }
This class of the pseudo-class would be added to A (anchor) tags using the CLASS attribute, as you might expect.
Example:
<p>Here is a <a href="http://www.yahoo.com/" class="warning">Yahoo</a> link.</p>
If, for some reason, you decide to use more than one set of hyper-reference colors on one HTML page, you had better be careful that your context makes it VERY clear which words are really hyper-references, and which ones are merely colored.
To fully ensure that users recognize hyper-references on a page, it is wise to force an underline to appear below the hyper-referenced words; underlines under colored words on a web page usually indicate hyper-references.
Underlines can be set using the text-decoration property with the underline value.
Example (abbreviated):
text-decoration:underline;
Example:
a:link { color:#0000FF; text-decoration:underline; }
a:visited { color:#FF00FF; text-decoration:underline; }
a:active { color:#FF0000; text-decoration:underline; }
To turn OFF the underline, set the text-decoration property to the none value.
Example (abbreviated):
text-decoration:none;
I strongly urge you NOT to turn off the underline for the pseudo-class if you are using MORE than one set of link colors (either with contextual selectors or classes of the pseudo-class). By the same token, do NOT set an underline for something that is NOT a hyper-reference unless your context makes underlining highly appropriate. Again, most users associate underlines with hyper-references; try not to confuse your users.
 |
 |
Copyright © 2001 Michael Masumoto. All Rights Reserved.