Learn CSS: Link Classes

Basic Links

When you create a link in CSS it can be just a standard link with a few basic properties simular to standard HTML links, heres an example:

As a class in your stylesheet document

a {font-family:Verdana; font-size: 12pt; color: black; font-weight: bold;}

or directly within an <a> tag

<a style="font-family:Verdana; font-size: 12pt; color: black; font-weight: bold;">Link Example</a>

Link Properties

Here a list of the additional properties that you can apply to your links:

color: black;
color: #000000;
font-weight: bold;
font-weight: normal;
font-size: 10pt;
font-size: 10px;
text-decoration: none;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;

Dynamic Links (Pseudo-classes)

If you want your links to do more you will need to add classes to them within your stylesheet document, below are some example of links that use different classes:

a:link {font-family: Verdana; font-size: 12pt; color: black;}
a:active {font-family: Verdana; font-size: 12pt; color: black;}
a:visited {font-family: Verdana; font-size: 12pt; color: grey;}
a:hover {font-family: Verdana; font-size: 12pt; color: red; font-weight: bold;}

Link example 1

This example has not been given any class before the ":link :acive :visited or :hover" this means that these settings will effect all <a> tag links that havent been given a class a bit like a universal setting.

a.example12link {font-family: Verdana; font-size: 12pt; color: black; text-decoration: none;}
a.example2:active {font-family: Verdana; font-size: 12pt; color: black; text-decoration: none;}
a.example2:visited {font-family: Verdana; font-size: 12pt; color: grey; text-decoration: none;}
a.example2:hover {font-family: Verdana; font-size: 12pt; color: grey; text-decoration: underline;}

Link example 2

This example has been given a class as you can see above with "a.example2:link". All you need to add to your <a> tag is:

<a class="example2">Link example 2</a>