Removing the Underline From Links in CSS - and more!

Removing The Underline From Links in CSS

One of the most common uses of even basic CSS is to alter how links look and behave. This builds on the tutorial about CSS Text Formatting, so if you haven’t read that yet, I suggest you do!

Here’s the code snippet we will be working through:

a, a:visited{
 color:#f00;
 text-decoration:none;
 background-color:#ddd;
}
a:hover, a:focus{
 text-decoration:underline;
 background-color:#fff;
}
a:active{
 color:#fff;
 background-color:#c00;
}

Removing the Underline From Your Links

The first thing we have done here is redefined how all <a> tags work (See: Links and Anchors in HTML).

I have given all links a new text colour (using the color declaration) and a background colour. Unless you tell your page otherwise all links will be underlined and put in the colour set by the browser (commonly blue). Your links should always stand out from non-clickable text, so changing their colour to be different to your p{ } or body{ } colour is highly recommended.

We have removed the default underlining by simply specifying text-decoration:none;. The link is still clickable and stands out from the rest of the text. Job done!

Using One Set Of Rules For Two Things

So far we have only looked at affecting one HTML Tag with our CSS. However, if you want to use the same set of rules for more than one tag, then you can do this with a comma-separated list before your { }‘s.

So if we want to set the same colour scheme for <td> and <th> tags (See: HTML Tables Tutorial) then you could use this code snippet:

td,th{
 font-weight:normal;
 font-size:14px;
 background:#226622;
 color:#eee;
}

In the case CSS and Links we have said that we want links whether the user has visited them or not, to appear the same (recommended!).

Pseudo-Classes in CSS

This is the first time I have introduced you to Pseudo-classes. A Pseudo-Class takes a HTML Tag, applies a rule to it and then uses the CSS rules if they apply. So in the case of

a, a:visited

We want all links a and those the user has visited a:visited to use the same rules. And a:hover and a:focus follow the same rules.

Changing the Link Colour on MouseOver

Another popular thing to use CSS for is to change the font colour of links on mouse over. This is when your cursor is over the link.

This is achieved using the pseudo-class a:hover. It applies the new CSS to the link only while your cursor is over it. Once it isn’t, the normal a, a:visited rules are reinstated.

I also suggest that, if someone uses the tab key to highlight a link before clicking it, then their cursor may not be over that link. In this case instead of :hover, we want to trigger a:focus so that the same behaviour applies regardless of how the link is highlighted.

Hover in the Era of Mobile

If you own a smart phone or tablet, you’ll know that cursors don’t apply. We use our fingers, or a stylus, or an Apple Pencil. You may still want to change the look of links when someone presses or taps that link. If you do then you want to use the a:active pseudo-class. This can help users know they have definitely pressed it, even if their device or Internet connection hasn’t loaded the page yet.

TL;DR Changing Links in CSS

This is a nice straightforward tutorial on changing how links look and behave in CSS. You can update colours, remove the underlining and give a dynamic background colour. All the CSS Text Formatting options apply to links as well. So why not couple this tutorial with that one and see what you can come up with.

If you need help just use the comments!



Other CSS3 Tutorials

Spread the Word

Share This On Facebook Share This On Twitter Share This On Linkedin Share This On Google Plus Share This On Pinterest Share This On Mail

Leave a Reply

Your email address will not be published. Required fields are marked *