10. Special links with CSS

Classes of Links

Links can do many things. They can point to email addresses, ftp addresses, other parts of the same site, or different sites altogether. And we don't really know which of these a little bit of underlined blue text is until we move the mouse over it and inspect the url, or possibly until we click the link.

It would be nice to be able to code our links so that users could determine what kind of links they were simply by looking at them. With style sheets, and classes, we can do just that. In fact, by combining the link selectors (technically called pseudo class selectors) like A:hover (see chapter 7), with class selectors, we can create a style for classes of links in different states.

That's just what we are going to do in this lesson.

Exercise 1

Firstly, let's think about the different classes of link you might have on a page.

Check at the end of the lesson for my thoughts

pop quiz

What are the four link state selectors we saw in Setting Up Links?

Combining Class and the Link Selector

Here is the tricky part. We need to combine the link selectors with class selectors. To do this, we use the following form

A.class-name:link-state

for example

A.ftp:link

Exercise 2

Create the following selectors

1. The selector to select email links in the active state
   
2. The selector to select ftp links in the hover state
3. The selector to select offsite links that have been visited

Exercise 3

Got the hang of that? Now we want to create rules to select and apply style to each of these classes of link in our page.

See my example answers at the end of the lesson, after you've created your rules, of course.

Exercise 4

Lastly, we need to mark up these classes in our web page.

My examples are at the end of the lesson.

Now, save the style sheet and the web page. Open the page in your browser (IE 4 if you have it, just so you can delight in the hover effect).

Next

In this lesson we got pretty sophisticated, combining the pseudo class selector (link selector) with the class selector. We've come a long way.
Next we will look at an important issue, how to ensure style sheets based sites look OK in older browsers.

Answer to Exercise 1

onsite links that point to other parts of this site, that is relative links
offsite links that point to sites other than this one, that is absolute links
ftp links to ftp site for downloading files
email for mailto links

and I'm sure you could think of others.

Answer to Exercise 2

1. The selector to select email links in the active state is A.email:active
   
2. The selector to select ftp links in the hover state is A.ftp:hover
   
3. The selector to select offsite links that have been visited is A.offsite:visited

Answer to Exercise 3

A.onsite:link {background-color: #ccffcc}

A.onsite:visited {background-color: #99ffcc}

A.onsite:active {background-color: #66ffcc}

A.onsite:hover {background-color: #33ffcc}

A.offsite:link {background-color: #ffccff}

A.offsite:visited {background-color: #ff99ff}

A.offsite:active {background-color: #ff99ff}

A.offsite:hover {background-color: #ff66ff}

A.ftp:link {background-color: #ffffcc}

A.ftp:visited {background-color: #ffff99}

A.ftp:active {background-color: #ffff66}

A.ftp:hover {background-color: #ffff33}

A.email:link {background-color: #00ffff}

A.email:visited {background-color: #66ffff}

A.email:active {background-color: #99ffff}

A.email:hover {background-color: #ccffff}

Answer to Exercise 4