09 - CSS Links

Any CSS property we have learnt till now can be used to style links in CSS. For instance, we can change the font of the link or background or we can set a color to a link.

We cannot simply use different colors for styling the links. They should be styled according to their state.

The various states of the links are given the table below:

Link

Description

Unvisited

A link which is not visited

Visited

A link which is visited

Active

The link becomes active, the moment it is clicked.

Hover

When the user places the cursor on the link.

Generally, the style information for links is placed in head section.

The definition would be effective if the order of the links in CSS follow the following order,

  1. Link
  2. Visited
  3. Hover
  4. Active

Setting a Color to a Normal Link

As we know, we use anchor tag (<a> and </a>) to create links.

Now we will see how to set a color to a normal link using CSS.

<html>
 <head>
    <style>
    a:link
    {
    color: #FA8072;
    }
    </style>
 <body>
    <a href="http://saphotos.com/">Want to see some amazing photos, Click me!!</a>
 </body>
</html>

The output of the above program would be:

Setting a Color to a Visited Link

Now we will see how to set a color to a visited link using CSS.

<html>
 <head>
    <style>
    a:visited
    {
    color: #FF0F87;
    }
    </style>
 <body>
    <a href="http://saphotos.com/">Want to see some amazing photos, Click me!!</a>
 </body>
</html>

When the link is visited the color of the link would change as following:

Setting a Color to a link when cursor is hovered

.Now we will see how to set a color to a link when the mouse is hovered using CSS.

We can also use other text effects to add some impact like converting the link text to italics or making it bolder or increasing the character spacing whenever the cursor is hovered over the link.

<html>
 <head>
    <style>
    a:hover
    {
    color: #FF0FFF;
    text-transform:uppercase;
    }
    </style>
 <body>
    <a href="http://saphotos.com/">Want to see some amazing photos, Click me!!</a>
 </body>
</html>

The output before the cursor is hovered:

Output when the cursor is hovered on it:

Setting a Color to an active Link:

<html>
 <head>
    <style>
    a:active
    {
    color: #FF0000;
    }
    </style>
 <body>
    <a href="http://saphotos.com/">Want to see some amazing photos, Click me!!</a>
 </body>
</html>

When you click on the link, the color of the link would change to red:

Removing Underlines

All the links are generally underlined. Some designers might be interested to style their links differently. We can remove the underlines from links easily by including a simple line of code in CSS.

If you remember, we learnt about text decoration property in our previous chapter. Yes, we use that property to remove underlines from the links. Just set the text-decoration property to none to achieve the said effect.

Below is the example:

<html>
 <head>
    <style>
    a:link
    {
    color: #FF0000;
    text-decoration:none;
    }
    </style>
 <body>
    <a href="http://saphotos.com/">Want to see some amazing photos, Click me!!</a>
 </body>
</html>

The output would be:

We are used to underlined links, moreover, we can easily make out the difference between normal text and links when they are underlined.

The users might be confused when the links are not underlined. If you wish to remove underlines from links, come up with another idea of highlighting the links.

This is all about links in CSS and in the next chapter we will learn Styling lists in CSS.

Like us on Facebook