Subscribe
Tutorial search

How to style links with CSS - CSS tutorial

Learn how to easily style your links in css - including visited links, rollovers etc.
Category: CSS tutorials - Difficulty:




Adding links to your page is easy. If you know basic HTML, you probably know how to do this. What you have previously learned from the other discussions can be applied to links such as changing colors, adding lines and adjusting fonts. What is more amazing is the fact that CSS allows you to define whether the link has already been visited or not, whether the link is active or when the cursor is pointing at the link. These effects that you can apply to links using CSS are what we call “pseudo-classes”.

Pseudo-class makes it possible for you to consider different conditions or events when you are to define a property for an HTML tag.

We have previously learned that “links” uses the HTML tag . To change the link color, we use this command:

a {
Color: orange;
}

For you to be able to determine whether a link has been visited or not, or if your cursor is pointing at a particular link, you add effects to assign different styles to them. This is by using the pseudo-classes.

a:link {
color: blue;
}

a:visited {
color: red;
}

These are the commands for the different link states:

  • a:link is used to indicate that the link has been unvisited.
  • a:visited is used to indicate that the link has been visited.
  • a:active pseudo-class indicates that the links are active.
  • a:hover indicates that a cursor is pointing at the link.

The first pseudo-class (a:link) is used for links that have not been visited.

a:link {
color: #6699CC;
}

The second pseudo-class (a:visited) is used to indicate that the links has already been visited.

a:visited {
color: #660099;
}

The third pseudo-class (a:active) is used to indicate an active link.

a:active {
background-color: #FFFF00;
}

The pseudo-class hover is used to indicate that the mouse pointer or cursor is on a particular link.

a:hover {
color: orange;
font-style: italic;
}

You have to take note that “a:hover” must always come after the first two pseudo-classes -- “a:link” and “a:visited” -- for it to take effect. “a:active also needs to be placed after “a:hover” for it to be effective.

a:link {color: #FF0000} /* unvisited link */
a:visited {color: #00FF00} /* visited link */
a:hover {color: #FF00FF} /* mouse over link */
a:active {color: #0000FF} /* selected link */

When cursor is over a Link

You can design how the link should appear when the curser is over it in different ways. For one, you can change the spacing of letters. To do this, just type in the syntax below:

a:hover {
letter-spacing: 12px;
font-weight:bold;
color:brown;
}

Another way you can design it is by changing the case of the letters (uppercase or lowercase). This is the syntax to use:

a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}