CSS Tutorial

CSS Style

CSS Layout Style

CSS Float Style

CSS Reference

CSS Hyperlinks Style - How To Change Hyperlink Color


CSS Hyperlinks Style work when cursor rollover or click on specific hyperlink. you can set hyperlink styles using various CSS properties like background-color, font-family, font-weight, color, font-size and many more.

You can also set special styles depending on special event perform over hyperlink.

Following are special hyperlink event to apply CSS style when this occur.

  • a:link : Normal unvisited link
  • a:visited : Link already user has been visited
  • a:hover : When user mouse hover over the link
  • a:active : Clicked the link at that moment

Here some rules apply when you set the style for hyperlink.

  • a:hover always come after a:link or a:visited
  • a:active always come after a:hover

Following CSS hyperlink Style property are various type style listed.

Example Code:

<body>
	<head>
		<style type="text/css">
			a:link {color:##e14d43;}    /* normal link */
			a:visited {color:#50afe5;} /* visited link */
			a:hover {color:#fe0000;}   /* mouse over link */
			a:active {color:#fe0000}  /* selected link */
		</style>
	</head>
	<body>
		Click Here <a href="../css_tutorial.php" >Example Link</a>
</body>

Run it...   »

Example Result:


CSS Links Background Color

<head>
	<style type="text/css">
		a:link {background-color:#CCCCCC;}     /* normal link */
		a:visited {background-color:#CCFFCC;}  /* visited link */
		a:hover {background-color:#FF0000;}    /* mouse over link */
		a:active {background-color:#FFFFFF;}   /* selected link */
	</style>
</head>

Run it...   »

Example Result:


CSS Text Decoration

<head>
	<style type="text/css">
		a:link {text-decoration:none;}    
		a:visited {text-decoration:none;} 
		a:hover {text-decoration:underline;}   
		a:active {text-decoration:underline;}  
	</style>
</head>

Run it...   »

Example Result: