CSS Link Tutorial

A common question asked is how to change the color of lines when the mouse moves over it, or how to have multiple link colors on one page. The answer lies in CSS (cascading style sheets).

Cascading Style Sheets are useful for much, much more than changing link colors. CSS can be used to position elements absolutely, define content for different media types (screen, print, audio, PDAs', etc.), and is one of the backbones of DHTML (along with HTML and Javascript, or any other scripting language). However, changing link colors are a practical and simple beginning for it all.

 

Defining Link Colors with CSS

To define colors for links with CSS, follow this example:

<style type="text/css"> A:link {color:#0000FF; text-decoration:underline;}
A:hover {color:#FF0000; text-decoration:underline;}
A:active {color:#00FF00; text-decoration:underline;}
A:visited {color:#0000FF; text-decoration:underline;}
</style>

The above example would make a link blue, red when moused over, green when clicked on, and blue after visited. The A:hover selector works only with Internet Explorer 4.x and Netscape 6. All forms of the link would be underlined.

 

Link Attributes

Atributes are the properties that a selector (such as "p", "A:link", "body") can have. The attributes that the link selectors can have are numerous, and many of them unnecessary. However, there are a few that are used often.

<style type="text/css"> A:link {
color:#0000FF;
text-decoration:none;
font-style:italic;
background:rgb(255,255,0);
font-weight:normal; font-family:"Times New Roman",serif;
}
</style>

The above example would produce a link that looks like this. It is a good idea to not change the font-weight, font-style, font-family, or font-size for the A:hover selector. That can screw up the layout of your page. Another attribute is the cursor attribute. I won't cover this because it's not very reliable, and from the user point-of-view, very annoying.

 

Different Color Links on the Same Page?

Indeed it is possible. This effect can be achieved a couple different ways, I'll show you the most basic: classes. To make a class, follow the example below.

<style type="text/css"> A:link.classname {
color:#0000FF;
text-decoration:underline;
}
</style>
...
...
<a href="#" class="classname">Name</a>

The above example is pretty self-explanatory. All that must be done differently is to define a class name in the style sheet, and add that class name as an attribute to the HTML tag.

 

Implementation

To implement all the changes I've shown, you have to create an internal or external stylesheet. To create an external style sheet, open a blank document and name it "filename.css". Do not include <style> tags in the file. To link that file to your HTML documents, add this above the <body> tag:
<link rel="stylesheet" type="text/css" href="filename.css">

To create an internal style sheet, add this to your header:
<style type="text/css">
CSS goes here..
</style>

 

Created by David Thompson (empire) for UBBdev.com.