<\/p>\n<\/p>\n
Anchor tags (a.k.a. links or hyperlinks) (these things: <a>) are one of the more ubiquitous elements of the web world. In fact, it\u2019s the anchor tags that put the \u2018Web\u2019 in the World Wide Web \u2013 they\u2019re the points of interconnectivity, like strands in a spider web, that hold this whole crazy Net of ours together.<\/p>\n
And we all know what links look like, too: they\u2019re dark blue, underlined, and stand out on a page like the varicose veins on the backs of great-Aunt Esther\u2019s legs. And just as we don\u2019t understand why Esther would choose to wear<\/em> those shorts in public, we don\u2019t understand why something as common as an anchor tag should have to look so darn unattractive.<\/p>\n With CSS, links don\u2019t have to be ugly.<\/p>\n But here\u2019s the kicker: with CSS, links don\u2019t have to be ugly. They can look pretty much however you want. Here are a few of the things you can do to make your links stand out without sticking out:<\/p>\n Change the Color.<\/strong> Some stick-in-the-mud Web proponents<\/a> would have you believe that blue is the only color a hyperlink should ever wear, in much the same way that white shoes after Labor Day are a social faux-pas. Their argument is that people are used to seeing blue, underlined links; to mess with this convention is to anger the gods and confuse your readers. I say bollocks! Any text that stands out from the rest will attract attention. And green can stand out just as well as blue:<\/p>\n This gives us a lovely link the exact shade of a seasick leprechaun. How\u2019s that for fancy?<\/p>\n Underline, Schmunderline.<\/strong> Personally, I\u2019m not a big fan of underlined text. Too much of it can be a distraction \u2013 everything on the page seems to be clamoring for attention. So why don\u2019t we remove the underline from that hyperlink:<\/p>\n And now, our links don\u2019t overwhelm<\/a> the nearby text.<\/p>\n Or, you could even make the underline only appear when someone puts their mouse over the link (my personal favorite):<\/p>\n The rules above state that \u201cnormal\u201d anchor tags should not have any sort of decoration: no underlines, in other words. However, when someone \u201chovers\u201d over an anchor, we should put the underline back.<\/p>\n Image is Everything.<\/strong> If you wanted to get really fancy, you could even make a small image (an icon, if you will) appear next to your links. All you have to do is create your image at the appropriate size, put it on your server where your CSS can get to it, and do something like this:<\/p>\n This rule is a little more complicated, so I\u2019ll explain in greater detail. First, we applied some padding to the anchor tag… we need some room for the image to show up. Then, we applied the image to the background of the element (which, as we learned last time, is applied to the padding around an element). Under normal circumstances, the background would repeat itself in every direction, showing up underneath our link text. We don\u2019t want that, so we added the \u2018no-repeat\u2019 condition to stop it from showing up more than once. And the result: links with images<\/a>.<\/p>\n Putting it All Together. <\/strong>When our powers combine, we become… Captain Hyperlink! Or, at the very least, we can have aesthetically pleasing links that somehow manage to attract attention without overwhelming the page. And without reminding us of great-Aunt Esther\u2019s visit last summer.<\/p>\n If we take what we know about CSS classes and apply that to this example, we could even make certain types of links look different from others:<\/p>\n Now how\u2019s that for some fancy linkage? I encourage you to take these examples I\u2019ve provided and expand upon them. What can you make your links do?<\/p>\na { \n\tcolor: #6c6; \n}<\/pre>\na { \n\ttext-decoration: none; \n}<\/pre>\na { \n\ttext-decoration: none; \n}\na:hover { \n\ttext-decoration: underline; \n}<\/pre>\na { \n\tpadding-left: 16px;\n\tbackground-image: url(icon.gif) no-repeat; \n}<\/pre>\na.pdf {\n\tcolor: #c00;\n\tfont-weight: bold;\n\ttext-decoration: none;\n\tpadding-left: 10px;\n\tbackground-image: url(pdf_icon.gif) no-repeat;\n}\na.pdf:hover {\n\ttext-decoration: underline;\n}<\/pre>\n