CSS Links
What is Link?Link is communication way that help user to move to different location on website. A link a very important for webpages to connect these page and help the user to jump to the required content using these links.There different state of links.
The links states are:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link when user clicked on it
Links Color
Short Program
<html>
<head>
<style>
a:link{
color:green;
}
a:visited{
color:#ef45ff;
}
a:hover{
color:blue;
}
a:active{
color:red;
}
</style>
</head>
<body>
<a href="http://www.google.com">Google</a>
</body>
</html>
Links Decoration
Short Program
<html>
<head>
<style>
a:link{
text-decoration:none;
}
a:visited{
text-decoration:line-through;
}
a:hover{
text-decoration:underline;
}
a:active{
text-decoration:underline;
}
</style>
</head>
<body>
<a href="http://www.google.com">Google</a>
</body>
</html>
Links Background
Short Program
<html>
<head>
<style>
a:link{
color:green;
}
a:visited{
color:#ef45ff;
}
a:hover{
color:blue;
}
a:active{
color:red;
}
a:link{
background-color:red;
}
a:hover{
background-color:green;
}
a:active{
background-color:blue;
}
</style>
</head>
<body>
<a href="http://www.google.com">Google</a>
</body>
</html>
Link Button
<html>
<head>
<style>
a:link, a:visited {
display:block;
font-weight:bolder;
color: #ffffff;
background-color:#98bf21;
width:100px;
text-align:center;
padding: 4px;
text-decoration: none;
}
a:hover {
background-color: #7A981A;
}
</style>
</head>
<body>
<a href="http://www.google.com" target="_blank">Google</a>
</body>
</html>
