A CSS Walkthrough, part 5

In the previous part of this walkthrough, I made the content appear in columns with floats.

Styling the links

I will now show you how to style the links. With CSS, you can style links by targeting the anchor tag like so:

a { /* your CSS goes here */ }
		

However, you can also style the 5 specific states of links. The states are: link, visited, focus, hover, active. An easy way to remember them is: Lord Vader's Former Handle, Anakin. Link, Visited, Focus, Hover, Active. Easy.

These states are styled via pseudo selectors. Here's the CSS so you can see what pseudo selectors look like:

a:link { }

a:visited { color:green; }

a:focus { background-color:#ffff99; }

a:hover { background-color:#ffff99; }

a:active { }
		

As you can see, I have decided to style my links as so:

Link

For the default link appearance, I do not want to apply any custom styles. Still, I state all 5 pseudo selectors in order so the browsers have an easy time processing them.

Visited

Links that have already been visited before will be green when viewed again.

Focus

When a user "focuses" on a link with their keyboard (by tabbing through links with the tab key), they will see a light yellow background that appears to highlight the link.

Hover

When a user hovers over a link with their pointing device (usually a mouse), they will see the same effect as with Focus.

Active

Active means how the link looks while the browser is loading that link after it has been clicked/entered. On fast internet connections, this state usually lasts less than a second. I have not applied any styling to it.

Because focus and hover have the same styling, I could have combined them as so:

a:focus, a:hover { background-color:#ffff99; }
		

As long as I maintain the order (L V F H A), the effect is the same. The CSS for this is located in step6.css and can be viewed at step2-3.html. Make sure to hover and tab through the links to see the effect.

We now have a unique webpage design. In the next part I will show some advanced techniques to improve this. Move on to part 6.