freeCodeCamp/guide/english/css/styling-links/index.md

title

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:

• MDN