How to Change Link color in Html

In all browsers, links appear in four ways which are as follows:

Unvisited link: The link that is not clicked is called the unvisited link. By default, its color is blue.

Visited link: The link that is clicked is called the visited link. By default, its color is purple.

Active link: The link that is clicked and still active is called an active link. By default, its color is red.

Hover link: When the mouse cursor hovers over a link then that link, it is called a hover link. The color of this link does not change when hovered. If hovered over a visited link then the color will be the same as that of the visited link. Similarly, if hovered over an unvisited link and active link then the color will be the same as that of the unvisited link and active link. We can manually change the hover link color utilizing HTML and CSS.

We can alter the link state colors in HTML with the help of the "style" attribute. We will use the "color" property to give color to the link.

If we want to change the link color using an inline style attribute which is used for linking to another page then we have to follow the steps which are given below. Using these steps, we can easily change the color of the link.

Step 1: Firstly, we have to type the HTML code in any text editor or open the existing HTML file in the text editor in which we want to use the "style" attribute for changing the link color.

Step 2: Now, place the cursor within that starting anchor tag whose link color we want to change. And, then type the inline style attribute within that tag.

Step 3: Now, we have to type the color property in the style attribute. And, then we have to specify the name of color which we want to show.

Step 4: And, at last, we have to save the HTML file and then run the file.

The output of the above HTML code is shown in the following screenshot:

We can use CSS properties to change the link color.

Let us see some examples of changing link color using CSS properties.

Example 1:

In this example, we will apply pink color to an unvisited link, coral color to a visited link, green color to an active link and magenta color to a hover link.

Code:

Output:

Unvisited link in pink color:

Hover link in magenta color:

Visited link in coral color:

Active ink in green color:

Example 2:

In this example, we will utilize "color" property of CSS to apply orangered color to an unvisited link, lime color to a visited link, seagreen color to an active link and darkred color to a hover link.

Code:

Output:

Unvisited link in orangered color:

Hover link in darkred color:

Visited link in lime color:

Active link in seagreen color:

Conclusion:

In this article, we have understood how to change link color in HTML. The following are some points to remember:

• The "style" attribute is utilized and specified "color" property inside it to give color to the link.
• The <style> tag is utilized and a CSS property called "color" is defined inside the <style> tag to provide link color.