How to change link color in CSS?

Links are used to connect one page to other web pages. Links with the same color as the rest of the text are difficult to notice. The color property of the CSS is used for changing the color of the links.

Using CSS, we can style the links in different ways. We can set some states of the hyperlink that are as follows:

It is to be noted that in the CSS definition, a:hover must come after a:link and a:visited and also a:active must come after the a:hover in order to be effective.

The order of declaring the states of hyperlink are given as follows:

To change the link color, we have to use the color property of CSS. The name of the color can be given in any valid format, such as the color name, rgb() value, or HEX value.

Now, let's see how to set the color of links using some examples.

Example

By default, the color of the normal or unvisited links is blue. In this example, we are changing the default link color by using the color property.

Output

Example

In this example, we are applying some CSS properties such as font-family, text-decoration, and background-color on the links. By default, the created link is underlined, so to remove the underline, we can use the text-decoration property and set its value to none.

Output

Example

Now, there is another example in which we will change the color of the active and visited links and also change the color of the link on hover. By default, visited links are colored as purple and active links are colored as red, so we will change their colors using the color property and using the pseudo-classes :visited, :active, and :hover.

Output

When the program gets executed, we will get the following screen.

On hovering, the link will look like as follows:

When the link is in the active state, then the color of the link is red, as shown below.