CSS Styles and Hyperlinks

I believe in using a standard color scheme for navigational links on Web pages. Active hyperlinks should be blue and visited links should be purple. This convention is predictable and creates a known expectation for the user. It is the rule, but, as one of my former profs used to say, it's acceptable to "break the rules" once in a while if you KNOW you're breaking them... it's NOT OKAY to break the rules because you are completely clueless about how it is SHOULD be done. With this in mind, I admit to using CSS from time to time to create links on pages that are not blue and are not underlined; but... it's okay because I KNOW I'm breaking the rules when I do this, right?

The problem is that I don't do it enough to remember the correct style syntax off the top of my head. So when the time comes to create non-standard links, I always have to dig through my stylesheets to find an example of a similar style entry I did in another project, duplicate it, modify it, etc. It always takes way longer than it should. I've tried using the CSS editor in Dreamweaver to speed the process but it is utterly worthless when it comes to link styling. Maybe this is by design to discourage people from creating unintuitive navigational link schemes on their web pages. Who knows?

I was having a devil of a time earlier tonight getting my hover state and text decoration to work the way I wanted on my personal photography gallery details page. I then learned that the order of the stylesheet entities is important (never heard that before!) which turned out to be the main culprit of my demise.

Anyway, when making a style entry into the HTML code of my page I need to remember to use the following syntax:

<~style type="text/css"~>

a.breadcrumb:link {color: red; text-decoration: none; font-size: 18pt; font-weight: bold; }
a.breadcrumb:visited {color: purple; text-decoration: none; }
a.breadcrumb:hover {color: orange; text-decoration: underline; }
a.breadcrumb:active {color: blue; }

<~/style~>

-----

<~a href="index.html" class="breadcrumb">home

Many thanks to Ross Shannon for an excellent article that helped me plod through this exasperating problem.

Update 6/2/08
I find it is sometimes faster to style a hyperlink using the INLINE method instead of embedding it as a psuedoclass in either the page or the style sheet.

<~a href="link.html" style="color: Red; text-decoration: none">Click Here<~/a~>

Unfortunately, the inline method doesn't yet (to my knowledge) support visited, hover and active parameters, though. Another cool trick is to style a hyperlink using display or inline to make the hyperlink resemble a box that is clickable!

<~a style="display: block; width: 150px; border: 1px solid black; padding: 10px; background: yellow; text-decoration: none;" href="#display">This entire yellow box is a hyperlink. You can click anywhere inside it.<~/a~>

Thanks to Iron Spider for this cool tip!