- You are here:
- WebsiteTips Home
- Articles, Tutorials, Tips
- CSS
- Convert Content to CSS
- Step 5
Converting Existing Content to CSS, Step 5
Links and CSS
by Shirley E. Kaiser, M.A., SKDesigns
Copyright © 2001-2016, Shirley E. Kaiser, M.A., SKDesigns. All rights reserved. Published at websitetips.com with permission.
When I was first learning CSS, I began with trying various effects with links. While there are lots of possibilities, it's also important to keep your effects user friendly and consistent. They need to be clear and make sense to visitors to your site.
With that in mind, let's have some fun with links and CSS for Step 5 of this tutorial.
On this page:
We'll be using the same color palette, so here it is again for easy reference.
| 1 | 2 | 3 | 4 | 5 |
|---|---|---|---|---|
 |  |  |  |  |
#fffff0 | #336666 | #669966 | #999966 | #669999 |
The comparable terms for designating links with HTML and CSS will probably be obvious by their names, but here's the breakdown:
| Type | HTML Attribute Name | CSS Pseudo-class Name |
|---|---|---|
| Link | link | link |
| Visited Link | vlink | visited |
| Active Link | alink | active |
| Hover Link | (none) | hover |
Instead of designating links with HTML in the <body> tag,
<body text="#336666" link="#999966" vlink="#669999" alink="#cc0033">
use the equivalent style rules within the style block as highlighted below:
<style type="text/css">
a:link {
color:#999966;
background:transparent;
}
a:visited {
color:#669999;
background:transparent;
}
a:active {
color:#cc0033;
background:transparent;
}
</style>
Another advantage of CSS is that you can control your styles for an entire Web site from one external style sheet, eliminating the need to edit every single page when you want to change colors, and providing an easy way to maintain consistency throughout your Web site. Step 6: External Style Sheets will show you how to convert your style block to an external style sheet.
Important: The order in which these pseudo-classes are listed makes a difference, so make sure you use this order. Otherwise they might not work properly!
Your markup should now look like this (the link pseudo-class additions are noted in bold red):
Markup with links info added. (A separate window will open.)
The Hover Pseudo-Class
A feature of CSS that doesn't have anything comparable with regular HTML is the dynamic hover pseudo-class. It is activated when the user passes the mouse over it. This can be used to good advantage for hyperlinks to help provide a visual cue that it's a clickable link. For the first example, we'll apply a contrasting background color to the hover pseudo-class.
When adding the hover pseudo-class, place it after the link and visited elements and before the active element, as shown below. As noted above, the order matters to ensure that your styles will work properly on your Web page.
a:link {
color:#999966;
background:transparent;
}
a:visited {
color:#669999;
background:transparent;
}
a:hover {
color:#fffff0;
background:#669999;
}
a:active {
color:#cc0033;
background:transparent;
}
Your markup and completed style block should now look like this:
Markup with hover pseudo-class info added. (A separate window will open.)
Now we need to create some links within your content. For this lesson, go ahead and choose a couple of spots within your content to add some hyperlinks something like this:
<a href="link.html">At vero eos</a> et accusam et justo duo dolores et ea rebum.
After you've added the hyperlinks, check to make sure your styles are applied properly, and test them to see if the hovers work. (Note that the hover pseudo-class will NOT work in Netscape 4.x browsers.)
For more technical details, the W3C's information:
- HTML Body Element Attributes
W3C's HTML 4.0 technical specifications for thelink,vlink, andalinkattributes (note that these attributes are deprecated). - The link pseudo-classes:
:linkand:visited, and
The dynamic pseudo-classes::hover,:active, and:focus
W3C's technical specifications for:link,:visited,:hover,:active, and:focus.
What Does it Look Like Now?
Your Web page should now look something like this:
The results with markup and CSS links added. (A separate window will open.)
