This tutorial will focus on creating custom link colors that can be applied to any web browser using CSS. Be default, the link color on most browsers is blue and the visited link color is violet.
Not only can you determine the unvisited link color and visited link colors but also the “hover” color and the “active” color (when you click on the link).
CSS will allow you to supersede the current browsers default link colors by using the “a” property and using the following attributes: link, visited, hover, and active.
Here is what the four declarations look like:
a:link {}
a:visited{}
a:hover{}
a:active{}
The four declarations can be applied to a page, tag, class or ID. You can even apply declarations to the entire site when using the same external style sheet on every page.
Applying Link Properties to a Specific Page
There are several ways to apply link properties to a specific page using CSS. The simplest form of applying the properties is to use the ‘body’ tag with the link declarations. Below is an example.
body a:link {color:green}
This will make all links in the page green. This would be applied using the “Embedded” and “External” type of CSS application.
To add all four of the link declarations using the body tag, it would look like the following:
body a:link {color:green}
body a:visited {color:black}
body a:hover {color:red}
body a:active {color:blue}
If you wanted to apply the same color property to all four declarations, the simplest way to apply them would be the following:
body a:link, body a:visited, body a:hover, body a:active {color:green}
To simply that even further, you can apply the following:
body a {color:green}
The body tag also allows you to also apply link properties using an inline style declaration. The body tag has three built in properties for links: link, vlink and alink. Below is an example of a link property applied to the body tag.
<body link=”green”>
Applying Link Properties to a Tag, Class or ID
The link properties can be applied to any tag, class or ID similarly like the body tag. Link properties can be applied using external or embedded styles only.
Below is how to apply link properties to various tags:
h1 a:link {color:green}
h1 a:hover {color:blue}
p a:hover {color:blue}
p a:link {color:green}
Like the body tag, if you wanted to apply the same property to all four declarations, the simplest way to apply them would be the following:
p a:link, p a:visited, p a:hover, p a:active {color:green)
To simply that even further, you can apply the following:
p a {color:green}
Below is how to apply link properties to a class called “menubar”:
.menubar a:link {color:green}
.menubar a:visited {color:blue}
.menubar a:hover {color:red}
.menubar a:active {color:black}
Like any other tag or ID, if you wanted to apply the same color property to all four declarations, the simplest way to apply them would be the following:
.menubar a:link,.menubar a:visited,.menubar a:hover,.menubar a:active {color:green}
To simply that even further, you can apply the following:
.menubar a {color:green}
Below is how to apply link properties to a class called “footer”:
#footer a:link {color:green}
#footer a:visited {color:blue}
#footer a:hover {color:red}
#footer a:active {color:black}
Like any other tag or class, if you wanted to apply the same color property to all four declarations, the simplest way to apply them would be the following:
#footer a:link,#footer a:visited,#footer a:hover,#footer a:active {color:green}
To simply that even further, you can apply the following:
#footer a {color:green}
Underline Link Properties
Another default style that browsers apply is the “underline” property to any link. This is part of the “text-decoration” property. You can attach a “text-decoration” property to any “link” related property. To remove this underline property from a class for example, the following declaration would be used:
.class a:link {
color:blue;
text-decoration:none;
}
