Link Tricks

Link Tricks? WTF?

Ok I'm making this page so I can show you things like how to style the look of your links using CSS, how to have a short description appear in a tooltip when the mouse is over the link, how to get the most out of a mailto tag, and a simple way to hide your email from spam bots.

Using CSS to style your links

Right lets talk about removing the underlining from your links and how to specify the colour it goes when the mouse is over it. I am going to assume a complete lack of knowledge where CSS is concerned and so will start with a how to use it.

CSS, or Cascading Style Sheets, are used to format how your page will appear by specifying that, for example, all text between <b> and </b> tags will be blue. Your CSS can be either External (on a seperate file), Internal (in the HEAD section of the page), or Inline (specified in the tag its self). For this example I am going to use an internal sheet. We use an internal sheet by placing the following in the HEAD section of our page (the bit between <head> and </head>).

<style type="text/css">
Style Definitions Go Here

Thats all I will say about how to use CSS and will now explain about styling your tags.

Since we are wanting to style our links we specify that we are going to be styling all a tags. We do this by putting a { } where it says Style Definitions Go Here (kinda obvious really). This tells the browser that all the attributes we are going to set between the { and } are to be applied to text formatted by the a tag. Now first thing we are going to specify is that we don't want our links to have underlines so we use text-decoration: none;. The : tells the browsers that we have finished naming the attribute we want to set and that what comes next is the variable for it and we tell it when we have finished with the attribute with a ;. Next we are going to say that we want all our links to be green. The attribute name for this is color=r. So we would use color: green;. You can also use hex values for colour such as #00FF00.

Now comes the fun part. Setting how we want the link to look when the mouse is over it. To do this we use a:hover { }. The attributes are exactly the same as above but for text-decoration this time we are going to specify that we want to underline them. The code for this is simply text-decoration: underline;. The three main variables you can use for this attribute are none, underline, and overline. For this example we also want our links to turn red when the mouse is over them so we simply chage the color attribute to red like color: red;. The complete thing should look like this:

<style type="text/css">
a { text-decoration: none; color: green; }
a:hover { text-decoration: underline; color: red; }

Describing Your Links

This section wil be very short as this is a simple, yet very effective, way to explain what your links lead to. So what is this forgotten miracle? It is simply the title="" attribute. By simply placing the title="" attribute in your a tag and placing our description between the " and " it will appear in a pop up when we place the mouse over the link. Try it! You can use the title attribute in almost every tag and it will pop up when you put the mouse over the text formatted by that tag.

Getting The Most From mailto

We all know, and have used, the <a href=""> link. A nice simple way to allow people to email us. But did you know you can also specify the subject line of the email as well? It's simple as this example shows <a href="">. Couldn't be simpler although I must point out that you should try to avoid using spaces in the subject line as some browsers/email clients will convert the spaces to %20 which is the code for a space. Even more is the fact you can even specify what the body of the email should say by simply adding <a href=" can use spaces here though">. As you will have noticed I have put spaces in the actual body of the email though. This is nearly every email client is designed to write email as HTML and so will show the spaces as spaces in the body and not convert them.

Hiding Your Email From Bots

Once again no big secret but most bots that are used to gather email addresses simply get a sites HTML code and look for any @'s or mailto: in it. So to stop them getting your email address we simply change the @'s and mailto: text to unicode. We replace mailto: with &#109;&#97;&#105;&#108;&#116;&#111;&#58; and any @'s with &#64;

Have Linux and want to learn more or just fancy trying it? Read our Linux tutorial.