CSSnewbie

Style your links with CSS

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?

When to Use CSS IDs and Classes

There are three different ways in CSS you can dictate which elements you want to style. Each way is useful for a specific set of purposes, but by using all three together, you can really harness the cascading power of style sheets. The three methods of describing objects on a page are by their tag name, their ID, or their class.

First and most obviously, you can style all of an entire subset of elements by styling a specific tag. For instance, take the following code (please!):

p { color: red; }

This states that all text within a paragraph <p> tag anywhere in your document should be colored bright red, like so. As with most of my code examples, this practice is ill-advised but hopefully illuminating nonetheless. This technique is most useful when you want to change a large number of elements on your page at once.

However, you can also describe elements according to their IDs and their classes. Both IDs and classes are ways of further clarifying which elements you’re planning to alter. So consider the following snippet of HTML:

<p id=”introtext”>This is a snappy introduction.</p>
<p class=”aside”>Okay, so the intro isn’t that great.</p>

Here we have two paragraphs, one of which has an id assigned, and the other which has a class. You could manipulate these two paragraphs independently of one another (and the other regular paragraphs in your document) with code such as this:

p#introtext { font-size: 150%; }
p.aside { font-style: italic; }

IDs are unique and beautiful snowflakes. Classes are not.

The first rule affects our “introtext” paragraph. We select that specific element with “p#introtext,” with a pound sign between the two elements, which means “paragraph tags with an id of introtext.” We’ve set its font size to be 1.5 times the size of a normal paragraph tag.

Our aside, on the other hand, uses a period between the element and the class, which lets the browser know we’re talking about classes instead of IDs. And you don’t even technically need the “p” identifier before the ID or class: styling simply “#introtext” or “.aside” would have worked just as well in this example, but the more specific you are, the less danger you’re in of accidentally styling things you didn’t mean to.

So what’s the difference between an ID and a class, then? It’s pretty simple: IDs are unique and beautiful snowflakes (just like you!). Classes are not.

Think of an ID something like the license plate on your car. It’s an identifier that, presuming you haven’t been a victim of theft, is unique to your vehicle. Similarly, an ID can only be used once per HTML document. So if you have something on your page that you need to be different from everything else, that is a good time to set an ID.

A class, on the other hand, can be applied to multiple elements on the same page. So, going back to our CSS example above, we’re saying that our page will have only one introduction, but can or will have multiple asides. Sort of like this article, when you get right down to it.

Another important distinction between the two is that each element on your page can have only one ID, but can have multiple classes. So you could have HTML like this:

<p class=”aside right”>Was this example really necessary?</p>

You could then have two classes defined in your CSS: one that does something specifically to asides, and another that does something to elements with a class of “right” (for example, it could float them to the right side of the page). Elements with just an “aside” class would only have the “aside” attributes applied, while elements with just the “right” class would just be floated right. But by applying both to one element as we have above, we can create a unique type of element without having to write a lot of extra code. And that’s what CSS is all about.