What Are Link Classes?

Link classes are just like the classes we learned previously. We can make different sets of links like the ones on this site. The links in the nav column to the left are styled differently than the ones I put in the regular content.

This is pretty common. You don't want all of your links to look the same. Link classes allow us to style as many types of links as we need.

Making Link Classes

We make a link class just like we made the classes of text in Lesson 5. Lets start by styling our overall links:

<style type="text/css">

a:link, a:visited {font-family: Tahoma, sans-serif;
font-size: 12pt;
font-weight: 700;
color: orange
text-decoration: none}

a:hover, a:active {font-family: Tahoma, sans-serif;
font-size: 12pt;
font-weight: 700;
color: red
text-decoration: underline}

</style>

The above would give us a big orange link in Tahoma. You should be able to understand all this from the previous lesson.

This is a pretty big link. Lets say we want a set of smaller links for a nav bar across the top of the page. We'll call this new class of links ".nav" and style it to be smaller, lighter, and blue/red.

<style type="text/css">

a:link, a:visited {font-family: Tahoma, sans-serif;
font-size: 12pt;
font-weight: 700;
color: orange
text-decoration: none}

a:hover, a:active {font-family: Tahoma, sans-serif;
font-size: 12pt;
font-weight: 700;
color: red
text-decoration: underline}

a.nav:link, a.nav:visited {font-size: 8pt;
font-weight: 500;
color:blue}

a.nav:hover, a.nav:active {font-size: 8pt;
font-weight: 500;
color:red}

</style>

It's very important to notice that the class is made by adding a dot and a class name after the "a" element. This is then followed by a colon and the name of the psuedo-class you're styling. Always remember that the "dot/class name" comes before the "colon/psuedo-class name". This is where a lot of syntax errors occur. There are no spaces in any of this. Remember:

a.class_name:psuedo-class

It's also important to remember that the link classes will inherit properties from the main "a" element styling. All you need to code in these classes is what you want to change from the main "a" element style rules.

Applying Link Classes

To apply a class styling to your links you just add the CLASS attribute to your <a> tags:

<a href="http://www.mysite.com" class="nav">

The above would apply the a.nav styling to the link. Links without a class attribute will be styled according to the overall "a" element style rules.

Try making at least three classes of links on one page. Add all the properties you can think of. One note: Changing "font-size" and "font-weight" with ":hover" and ":active" can cause some odd behavior on your page as the whole page may have to resize or rewrite itself to accommodate the new size. Give this a try to see the effect for yourself:

a:hover{font-size: 30pt;}

This will make your link very big when the mouse hovers over it. Watch how the rest of the text on your page has to dance around this. Not generally a desired behavior, but fun anyway. Remember that Netscape 4.x doesn't support the "a:hover" psuedo-class.

Next, we'll be discussing how to make an "external stylesheet" that can be linked to all of your pages. This is generally how <style> is applied on websites. A single page of CSS will style your whole site.

To Next Beginning CSS Lesson

Back To Beginning CSS Index