CSS and Hyperlinks

css CSS and Hyperlinks Css Hyper Links

CSS Links

The following four style sheet entities are used to control hyperlinks in CSS:

• a:link{} •a:visited{} •a:active{} • a:hover{} Example


<html>
<head>
	<style type="text/css">
		a:link{color:green;text-decoration: none;}
		a:visited{color:red; text-decoration:none;}
		a:active{color:blue;}
		a:hover{color:magenta;text-decoration: underline;}
	</style>
</head>
<body>
	<a href="http://wwww.codingpk.com">ALL programming tutorial available on codingpk</a>


</body>
</html>

Background colored links

Example

<html>
<style type="text/css">
a:link {background: #FFCC00; text-decoration: none}
a:visited {background: #FFCC00; text-decoration: none}
a:active {background: #FFCC00; text-decoration: none}
a:hover {background: #FFCC00; font-weight:bold; color: red;}
</style>
<body>
<ul>
 <li><a href="index.html">Home</a></li>
 <li><a href="about-us.html">About</a></li>
 <li><a href="movies.html">Movies</a></li>
 <li><a href="contact.html">Contact</a></li>
</ul>

</body>
</html>

Size changing links

Example

<html>
<style type="text/css">
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {font-size:24; font-weight:bold; color: red;}
</style>
<body>
<ul>
 <li><a href="index.html">Home</a></li>
 <li><a href="about-us.html">About</a></li>
 <li><a href="movies.html">Movies</a></li>
 <li><a href="contact.html">Contact</a></li>
</ul>
</body>
</html>

css Css Hyper Links Chapter Next »