How to change the color of a hyperlink text using CSS in HTML?

CSS is used to provide styling in html elements. A hyperlink is a link which transfers you to one page to another page which works only by clicking the text or image. So, in this we will learn how we can change the color of a hyperlink text using CSS in HTML?
Submitted by Prerna Saxena, on October 07, 2017

To provide various styles to HTML elements we need to use CSS. HTML only provide structure of web page but CSS provides various styles in HTML elements. CSS is placed in HTML elements using three ways-Inline, External or Internal.

A hyperlink is created in HTML using anchor tag which helps to go from one page to another. In this “href” attribute tells the location of page which will be opened on clicking on hyperlink.

The syntax of anchor tag is:

<a href="www.computerhope.com">Computer Hope</a>

You can change the color of link using CSS directly, like this:

a { color:red;}

But in this only one color will be fixed which will not change according to different states. If you want to change color according to different states we need to know there are four states: a: link, a: visited, a: hover, a: active

HTML code with CSS

<html>
	<head>
		<title>Hyperlink demo </title>
		<style>
		a:link 
		{
			color: blue;
		}
		
		a:visited 
		{
			color: black;
		}
		a:hover 
		{
			color: hotpink;
		}
		a:active 
		{
			color: red;
		}
		</style>
	</head>
	<body>
		<a href="https://www.google.co.in">Click It!!</a>
	</body>
</html>

Output

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples