WebsiteTips.com - Web Design Tutorials, Tips, Top Resources

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.

We'll be using the same color palette, so here it is again for easy reference.

Color Palette
12345
#fffff0#336666#669966#999966#669999
#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:

HTML/CSS Equivalent Link Names
TypeHTML Attribute NameCSS Pseudo-class Name
Linklinklink
Visited Linkvlinkvisited
Active Linkalinkactive
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:

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.)

top‘On this page’ menuNavigation belowSearch/Sidebar

Articles, Tutorials, Tips:

Most Popular Books

In association with  In Association with Amazon.com 

Our Other Sites

SKDesigns

Effective, accessible, standards-based Web site design since 1996

SKDesigns - skdesigns.com

Brainstorms & Raves

Weblog on Web design, CSS, standards, music, more. By Shirley Kaiser, SKDesigns.

Brainstorms & Raves


Within Articles, Tutorials, Tips:

Within Web Site Resources:
SkipShow or Hide Detailed Navigation