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!