CSS link properties – Setting color, style, size in HTML links

HTML links, <a href=””> can use CSS power to style in the web pages. You can apply different colors, styles, background, font size etc. in different states of a link by using the CSS link properties.

As such the links have four states:

  • A link until it is not visited/clicked is the normal state of a link.
  • As the mouse comes over a link, this is called hover state.
  • As a link is clicked, this is called as the active state.
  • After a link is visited, it is called the visited state of the link.

You may set different link properties for all these states, in order to distinguish the links that are visited or not or as the mouse comes over a link or a link is visited.

Below are a few examples of using each of these states and setting the link CSS properties.

Till a link is unvisited, it is called as the normal state of a link. The example below shows how to set CSS link properties: color, style, font size etc for a link in the normal state.

The first link is set with CSS link color, font style, and font size properties. The second link is set without an underline by using the text-decoration property.

Experience this example online

This example shows setting the link properties in the hover state, as the mouse is over a link. The color and size will be changed as mouse comes over the link by using CSS a: hover property.

Experience this example online

In the following example, we will set the CSS link properties in an active state (as the link is clicked). The color and size will be changed as the mouse clicks in a link.

Note that, nothing will be changed as the mouse is over the link. The appearance will be changed once the mouse is clicked on the link by using CSS a: active.

Experience this example online

To show your users that they have visited the link(s), you can use the visited state of a link. The CSS property used for that is a: visited as shown below.

Experience this example online


Also see CSS text color, CSS font size

Was this article helpful?

Related Articles

Leave A Comment?