Home Our Services: Web Portfolio E-Commerce Database Application Search Engine Placement Compass Point Bio Compass Point Philosophy Resources: Knowledge Base Internet Primer Web Projects Workflow Sample Site Features Sample Applications Advanced Projects: Web Services Universal Database News: Newsletter Internet Updates Press Site Map Contact Us
|
How to use CSS for Links
------------------------------------------------------------
• Back to Knowledge
Base
Sometimes the most glaring feature on a great looking site is the links--blue and magenta, the default for Netscape and IE, are just downright ugly for many color schemes. Fortunately it's easy to control this aspect of your page with CSS. This page is designed to get you up and running quickly. If you want to view the CSS primer then click here (yes, a link...)
There are 4 states of a link you can control:
1. Initial state--indicates that the link is a link. Browser default
is blue, underline, you may not want that.
2. Hover state--during mouseover.
3. Visited state--when the link has been visited; default is Magenta,
underline in IE/NS, definitely worth overriding with CSS
4. Active state--when you click on a link, or visit a link and
come back, the link will be "active" until you click somewhere
else in the document. Basically a good way to say, "here's the last
thing you looked at." You'll see this on search engines like Google
with long lists of links.
You can control the color, underline, even background color of any of
these states (and more aspects), so your links can blend in well with
any color theme in a site. I've just used the fundamentals here but you
can research more on the web; just be careful of the syntax.
Following is the coding you'd use in the <head> of your document,
then examples:
***************************************************************************
<style type="text/css">
/* Here is the coding that does it:*/
A:link {
COLOR: gray;
text-decoration: none;}
A:visited {
COLOR: green;}
A:active {
COLOR: blue;}
A:hover {
COLOR: #FF4400;
text-decoration:underline;}
</style>
*****************************************************************************
These links are examples:
Here is a sample link: this is a test
Here is a sample link: this is a test
Here is a sample link: this is a test
Here is a sample link: this is a test
Here is a sample link: this is a test
There is no special coding that needs to be applied to the href itself!
Multiple Link Styles
What if I wanted to have several different link styles (like this page
for example)?
Easy. Simply declare a group in the <style> tag with a pound
as follows:
*****************************************************************************
/*Here is the coding that does it*/
#section2 A:link{
COLOR: black;
TEXT-DECORATION: none;
}
#section2 A:hover {
COLOR: blue;
TEXT-DECORATION: underline;
font-weight:700;
background-color:lightgray;
}
#section2 A:visited {
COLOR: yellow;
TEXT-DECORATION: none;
}
#section2 A:active {
COLOR: teal;
TEXT-DECORATION: underline;
}
****************************************************************************
Coding for the Link is different, here it is:
<span id=section2><a href="somepage.com"
>this is a test</a></span>
(yes, the <span> tag is a pain but you can actually wrap it just
as well around a larger block of text)
***************************************************************************
Here is a #section2 link: this is a test
Here is a #section2 link: this is a test
Here is a #section2 link: this is a test
Here is a #section2 link: this is a test
Here is a #section2 link: this is a test
That's all there is to it. If you need help send me an email.
