CSS and Hyperlinks


css CSS and Hyperlinks Links Css

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 Links Css Chapter Next »