Styling Links
Published on the 30th of January 2005
Links are the main way to provide navigation through your website and the simplest way at that. You want your links to look good and match your layout. By default most browsers have links blue and underlined. This doesn't match all layouts, so you want to change them. You can change the style of hyperlinks by using CSS. To use CSS properties to alter how links look you use this format:
CSS
a {
CSS Properties here
}
You can put about any CSS properties inside the braces. Here is an embedded style sheet that makes all links have no underlines and black:
XHTML
<style type="text/css">
a {
color: #000;
text-decoration: none;
}
</style>
text-decoration is one of the main CSS properties used when styling links. It has quite a few possible values, here they are:
noneunderlineoverlineline-throughblink
The color value controls the font color. Another popular link styling trick is mouseover affects. Here's the format of a mouseover CSS affect.
CSS
a:hover {
CSS Properties
}
In the braces you can place any CSS statements. Let's put what we have learned so far together to make some simple code:
CSS
a {
color: #000;
}
a:hover {
color: #fff;
text-decoration: none;
}
This code is pretty simple, but makes a nice affect. All links are black and underlines, when you put your mouse over a link it changes to white and has no underline. By default all links are underlined so when you don't specify text-decoration that is what it's set to.
Styling links isn't hard and since you can use any CSS property you can make some pretty neat effects. Happy Coding!
