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’s the anchor tags that put the ‘Web’ in the World Wide Web – they’re the points of interconnectivity, like strands in a spider web, that hold this whole crazy Net of ours together.
And we all know what links look like, too: they’re dark blue, underlined, and stand out on a page like the varicose veins on the backs of great-Aunt Esther’s legs. And just as we don’t understand why Esther would choose to wear those shorts in public, we don’t understand why something as common as an anchor tag should have to look so darn unattractive.
With CSS, links don’t have to be ugly.
But here’s the kicker: with CSS, links don’t 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:
Change the Color. Some stick-in-the-mud Web proponents 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:
a {
color: #6c6;
}
This gives us a lovely link the exact shade of a seasick leprechaun. How’s that for fancy?
Underline, Schmunderline. Personally, I’m not a big fan of underlined text. Too much of it can be a distraction – everything on the page seems to be clamoring for attention. So why don’t we remove the underline from that hyperlink:
a {
text-decoration: none;
}
And now, our links don’t overwhelm the nearby text.
Or, you could even make the underline only appear when someone puts their mouse over the link (my personal favorite):
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
The rules above state that “normal” anchor tags should not have any sort of decoration: no underlines, in other words. However, when someone “hovers” over an anchor, we should put the underline back.
Image is Everything. 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:
a {
padding-left: 16px;
background-image: url(icon.gif) no-repeat;
}
This rule is a little more complicated, so I’ll 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’t want that, so we added the ‘no-repeat’ condition to stop it from showing up more than once. And the result: links with images.
Putting it All Together. 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’s visit last summer.
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:
a.pdf {
color: #c00;
font-weight: bold;
text-decoration: none;
padding-left: 10px;
background-image: url(pdf_icon.gif) no-repeat;
}
a.pdf:hover {
text-decoration: underline;
}
Now how’s that for some fancy linkage? I encourage you to take these examples I’ve provided and expand upon them. What can you make your links do?
I’d just like to point out that using more than colour to make your text links stand out is good, basic accesibility.
In other words, don’t be too quick to remove the underline :)
If you want to get fancy you can always add a border-bottom.
That’s a good point, Erwin. If visual accessibility is going to be a necessary deciding factor in your design, removing all form of underline is probably a bad idea.
I go back and forth on using border-bottom on links to do fancier stuff. For example, the links on your blog look very nice in Firefox, but IE changes the dots to dashes, and it just isn’t the same.
Pingback: 12 Creative and Cool Uses for the CSS Border Property
Pingback: 12 Creative and Cool Uses for the CSS Border Property | Castup
Hi,
I am the proverbial CSS newbie, and was delighted to find a well designed and straightforward site for getting to grips with CSS.
I’e just tried out the example above, but, for some reason I cannot get the image to display next to the link. Any ideas?
Pingback: Style your links with CSS | CSS Tutorials - CSSHelper.net
Real brain power on diplsay. Thanks for that answer!
Hello to every one, because I am truly keen of reading this blog’s post to be updated regularly. It contains good material.
Hi! I could have sworn I’ve been to this site before but after looking at some of the articles
I realized it’s new to me. Anyhow, I’m definitely
delighted I discovered it and I’ll be book-marking it and checking back regularly!
My brother recommended I might like this website.
He was entirely right. This post actually made my day. You cann’t imagine just how much time I had spent for this info!
Thanks!
This post will help the internet people for setting up
new webpage or even a weblog from start to end.
Useful information. Fortunate me I discovered your website
unintentionally, and I am stunned why this accident didn’t happened earlier!
I bookmarked it.
Do you have any video of that? I’d care to find out some additional information.
Good info. Lucky me I discovered your site by accident
(stumbleupon). I’ve saved it for later!
This is really interesting, You are an excessively skilled blogger.
I have joined your rss feed and stay up for in search of extra of your fantastic post.
Also, I’ve shared your site in my social networks
It is truly a nice and useful piece of info. I am glad that
you just shared this helpful information with us. Please keep us informed like this.
Thanks for sharing.
Pretty portion of content. I just stumbled upon your website and in accession capital to assert that I acquire actually loved account your blog
posts. Any way I will be subscribing in your augment or
even I fulfillment you get entry to constantly rapidly.
Whats up very cool blog!! Guy .. Beautiful .. Amazing ..
I will bookmark your blog and take the feeds also? I am satisfied to find
so many helpful information here within the post, we want develop extra
strategies on this regard, thanks for sharing.
. . . . .
Hello colleagues, how is everything, and what you would like
to say regarding this paragraph, in my view its really remarkable
in support of me.
You really make it seem so easy with your presentation however I in finding this topic to be actually one thing that I feel I might never understand.
It sort of feels too complex and very huge for me. I’m taking a
look ahead for your next submit, I’ll try to get
the dangle of it!
This piece of writing provides clear idea for the new visitors
of blogging, that really how to do blogging.
This website was… how do I say it? Relevant!! Finally
I’ve found something which helped me. Thanks a lot!
For most recent news you have to pay a visit world wide web and on web I found this website as a
most excellent site for hottest updates.
Exceptional post but I was wondering if you could write a litte more on this subject?
I’d be very thankful if you could elaborate a little bit more.
Bless you!
I think that everything published was actually very
logical. However, consider this, suppose you were to create a killer headline?
I am not saying your content is not good., but what if you added
something to maybe grab a person’s attention? I mean Style your
links with CSS is kinda plain. You ought to
glance at Yahoo’s front page and see how they write post titles to grab viewers interested.
You might add a related video or a picture or two to get people interested
about everything’ve got to say. In my opinion, it would
make your posts a little livelier.
Hi, There’s no doubt that your web site could be having internet browser compatibility issues.
Whenever I take a look at your website in Safari, it
looks fine however, if opening in Internet Explorer,
it’s got some overlapping issues. I simply wanted to provide you with a quick heads up!
Other than that, excellent site!
Hey There. I discovered your blog using msn. That is a very neatly written article.
I will be sure to bookmark it and return to read extra
of your useful information. Thanks for the post.
I’ll certainly comeback.
Greetings from Florida! I’m bored to death at work so I decided to check out
your blog on my iphone during lunch break. I love the knowledge you
present here and can’t wait to take a look when I get home.
I’m amazed at how fast your blog loaded on my mobile .. I’m not even using WIFI,
just 3G .. Anyhow, awesome site!