How to create multiple link styles in CSS.

[djbosak]

HTML only offers to define one set of colors for your links. By using Cascading Style Sheets you can define the default colors and set different colors for certain links on a page. In this article you will learn to set the rules for default links, special links and grouped links.

The appearance of elements in CSS is defined in rules. A rule has two basic parts, a selector and a declaration. The selector needed in this case is “a”, referring to all links in the page. The declarations depend on how you want the links to look.


a { text-decoration: none; }



The rule above will prevent all links on your page from being underlined.
To set different rules for visited or active links you'll need to use pseudo-classes. These let you define the appearance of links in more detail. The code below shows you how to set the rules for the default, visited and active links.

a:link {
color: #f00;
background-color: transparent;
}

a:visited {
color: #c00;
background-color: transparent;
}

a:hover {
color: #000;
background-color: #f00;
text-decoration: none;
}

a:active {
color: #f00;
background-color: transparent;
}



custom links


In some cases you may want some links to have a different color than the default ones. To achieve this we'll need to make use of a class selector. In the sample below I used “.special” as class selector name.

a.special:link {
color: #00f;
background-color: transparent;
}

a.special:visited {
color: #00c;
background-color: transparent;
}

a.special:hover {
color: #fff;
background-color: #00f;
text-decoration: none;
}

a.special:active {
color: #00f;
background-color: transparent;
}

To indicate which links will have special colors, you will need to add the “class” attribute to your links.
<a href="http://google.com" class="special">google</a>




grouped links


You can also change the link appearance for a certain section of your document. This can be useful if you have a menu area, or want to make a certain group of links stand out from others.

<div id="menu"> .... </div>
In the example I have used a div container to indicate the group, but this could also be a td (table cell), p (paragraph) or something else. The “id” of the div is used as selector to apply the rules to.
#menu a:link {
color: #000;
background-color: transparent;
text-decoration: none;
}

#menu a:visited {
color: #ccc;
background-color: transparent;
text-decoration: none;
}

#menu a:hover {
color: #fff;
background-color: #000;
text-decoration: underline;
}

#menu a:active {
color: #f00;
background-color: transparent;
text-decoration: none;
}


The example above uses an element with an “id” set to identify a section of the document in which the links should have a different color. The same trick can be done by identifying an element or elements with a “class”. Especially if you have more than one section or element in your document you wish to apply the special colors to, this can be very useful.


.orange a:link {
color: #f93;
background-color: transparent;
text-decoration: none;
}

.orange a:visited {
color: #f93;
background-color: transparent;
text-decoration: none;
}

.orange a:hover {
color: #fff;
background-color: #f93;
text-decoration: underline;
}

.orange a:active {
color: #f93;
background-color: transparent;
text-decoration: none;
}



natural links

Next to adding classes or id's to identify elements, you can also use basic HTML elements to identify and color specific links. The main advantage of this is that you don't have to add any attributes to your tags. The example below will color all links inside a paragraph “<p>” and all links inside a list item “<li>”.


li a:link, p a:link {
color: #33c;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}

li a:visited, p a:visited {
color: #33c;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}

li a:hover, p a:hover {
color: #fff;
background-color: #33c;
font-weight: bold;
text-decoration: underline;
}

li a:active, p a:active {
color: #33c;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}



To apply the colors to both links inside a list item and paragraph, the declaration has to be defined and applied to two selectors, each with their pseudo class. “p a:link” applies to all links within a paragraph, “li a:link” to all links within a list item. By defining the two selectors separated by commas, the declaration that follows will be applied to both. Note that you are not limited to two selectors, you can define more if you want to.


.