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 »