Cheap "Link" Tricks, Part 1

Here is a quick little trick to enhance your page links using CSS. This is the first in a series of cheap link tricks we will be publishing. :)

Go to this page and roll your mouse over the links and watch what happens. Ha! Didn't expect that, did you? Doesn't it make you want to try it again? Go ahead. Then we'll show you how we did it.

In the HEAD of the example page, we have assigned several elements to the hover command: italic text with underlines and overlines, font size of 18, a font-family of Georgia as first priority (if the browser does not find it on the visitor's computer system it will look for "Times New Roman"), the font weight is bold and the color is red. To make it more interesting we gave the hover a background color of bright yellow. It is important to note that any font-family that is more than two words must be surrounded by quotation marks as shown with "Times New Roman". Do not use quotation marks with font-faces that are only one word. And separate all the font-family(s) with a comma and space as shown. Stating fonts that are uncommon is generally a waste of time as most people will not have Bolts (for example) on their computer systems, so the browser will merely skip over it anyway. Notice that each style element is separated with a semicolon and space. That is very important.

The code between the HEAD tags of this page looks like this(internal CSS):

<style type="text/css">
a:hover { font-style: italic;
text-decoration: underline overline;
font-size: 18px;
font-family: Georgia, "Times New Roman";
font-weight: bold;
color: #FF0000;
background-color: #FFFF00; }
<style>

Here is the code for external style sheets that govern your entire website's link hovers:

a:hover { font-style: italic; text-decoration: underline overline; font-size: 18px; font-family: Georgia, "Times New Roman"; font-weight: bold; color: #FF0000; background-color: #FFFF00}

Don't be afraid to take out style elements and see how your page looks without them. Try taking out one at a time and see what looks best to you. If you don't like the overline or underline, simply take it out. If you would rather replace the font-style with a normal style, simply change the word "italic" to "normal". Replace the color codes with whatever busts your bubble and ices your cookies. :) Okay, it's late and I'm on a roll---over. {snicker}

Obviously, we went overkill on this example to illustrate a point. Check what we did to this string of code in "Cheap Link Tricks, Part 2". I am almost starting to feel sorry for it. ;) And there you go, a Cheap Link Trick with CSS.