Styling Links – CSS


title: Styling Links

Styling Links

Links can be styled with any CSS property, such as color, font-family, font-size, and padding.
Here is an easy example:

a { color: hotpink; }

In addition, links can be styled differently depending on what state they are in.

Links also have 4 states, and many programmers style each state differently.
The four states are:

  • a:link: an unvisited, unclicked link
  • a:visited: a visited, clicked link
  • a:hover: a link when the user’s mouse is over it
  • a:active: a link when it is clicked

The <a href=""> property is responsible for creating URLs and can be modified using a number of CSS styling properties, although it has a few by default:

  1. Underline
  2. Blue color

You can change these by adding or changing the color and text-decoration properties.

color: black; text-decoration: none;

You can also style the link based on interaction using these properties, also known as link states:

  • a:link – a normal, unvisited link
  • a:visited – a link the user has visited
  • a:hover – a link when the user mouses over it
  • a:active – a link the moment it is clicked

Here is some sample CSS using the 4 states:

a:link { color: red; } a:visited { color: blue; } a:hover { color: green; } a:active { color: blue; }

Note that there are some ordering rules for when you are setting the style for link states.

  • a:hover MUST come after a:link and a:visited
  • a:active MUST come after a:hover a:link – a normal, unvisited link
    a:visited – a link the user has visited
    a:hover – a link when the user mouses over it
    a:active – a link the moment it is clicked
/* unvisited link */ a:link { color: red; } /* visited link */ a:visited { color: green; } /* mouse over link */ a:hover { color: hotpink; } /* selected link */ a:active { color: blue; }

More Information:

This article needs improvement. You can help improve this article. You can also write similar articles and help the community.