Javatpoint Logo
Javatpoint Logo

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:

a:active It is used to add style to an active element.
a:hover It adds special effects to an element when the user moves the mouse pointer over the element.
a:link It adds style to the unvisited link.
a:visited It adds style to a visited link.

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.

Test it Now

Output

How to change link color in CSS

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.

Test it Now

Output

How to change link color in CSS

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.

Test it Now

Output

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

How to change link color in CSS

On hovering, the link will look like as follows:

How to change link color in CSS

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

How to change link color in CSS




Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA