Week Four | Part Two: Styling for Navigation (cont.)

The Four States of the Pseudo-Class

There are four pseudo-classes for the <a> tag --- four states --- depending on whether the reader is reading or interacting with them. You can style each of them. Here are the four states:

a:link
This state determines how you want an unvisited link to display on your page.

a:visited
This state determines how you want a link to display after someone has visited a page link.

a:hover
This state determines how you would like the link to display when moused over.

a:active
This state determines how you would like the link to display when it is selected.

Pseudo-Class Order

Pseudo-class selectors must be placed in a certain order --- L V H A. The reason has to do with inheritance.

The a:link must come before a:visited and a:hover because the cascading rules will hide the color property of a:hover.

The a:hover is placed before a:active so the color properties will apply when the user both hovers over the hyperlink and activates the hyperlink.

A Pseudo-Example

To create a pseudo-class, go into your style sheet and begin to code:

a:link {
font-family: sans-serif;
font-size: 12pt;
text-decoration: none;
color: white;
background-color: transparent;
}

a:visited {
color: silver;
background-color: transparent;
}

a:hover {
text-decoration: underline;
color: red;
background-color: transparent;
}

a:active {
text-decoration: none;
color: white;
background-color: transparent;
}

Note that in this example I combined all the common font properties for all the four pseudo-classes into the a:link rule.

The reason is because a:visited, a:hover, and a:active will all inherit these properties. You don't have to do that, but it is a handy approach if you want some style consistency and don't want to do so much typing.

Also note that background-color was declared in each one. It seems redundant, but doing so will eliminate any warnings from a CSS validator.

Which kind of text will these new pseudo-classes apply? Any text or image which uses the <a> tag!

This is h1 as a hyperlink.

This is h2 with span class gray as a hyperlink.

This is p as a hyperlink.

So, it is fairly easy to style hypertext links with any selector you wish. All you need do is create the appropriate pseudo-classes for that selector in your style sheet.

I didn't do any specific styling in my style sheet for h1 or h2 as hyperlinks because I had no intention of using them as hyperlinks. Consequently, they look kind of sluggish.

P, on the other hand, looks much better as a hyperlink because I knew it would be an integral part in my design.

I do have an example which shows that you can style any selector so that is does look good as a hyperlink and fits within the navigation scheme. This link shows an example of what I mean. When you are done looking at the example ...

Go to Week Four Part 3