You can customize your links in different ways.
There are 4 link states:
- 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 the moment it is clicked
» EXAMPLE:
<html>
<head>
<style>
a:link {
color: #C00;
} /* unvisited link */
a:visited {
color: #33F;
} /* visited link */
a:hover {
color: #FC0;
} /* mouse over link */
a:active {
color: #000;
} /* selected link */
</style>
</head>
<body>
<a href="http://easilylearnhtml.blogspot.com/" target="_blank">Click On This Link</a>
</body>
</html>
» Result:
Result cannot be shown in our blog, but you can try it alone.
Link can be styled with color, fonts, background, etc.
We will show You these things in the below examples.
Background Color
» EXAMPLE:
<html>
<head>
<style>
a:link {
background-color:#C00;
} /* unvisited link */
a:visited {
background-color:#33F;
} /* visited link */
a:hover {
background-color:#FC0;
} /* mouse over link */
a:active {
background-color:#000;
} /* selected link */
</style>
</head>
<body>
<a href="http://easilylearnhtml.blogspot.com/" target="_blank">Click On This Link</a>
</body>
</html>
» Result:
Result cannot be shown in our blog, but you can try it alone.
Add different styles to hyperlinks
» EXAMPLE:
<head>
<style>
a:link {
background-color: #C06;
}
a:visited {
color: #FFF;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: line-through;
background-color: #3FF;
color: #333;
}
</style>
</head>
<body>
<a href="http://easilylearnhtml.blogspot.com/" target="_blank">Click On This Link</a>
</body>
</html>
» Result:
Result cannot be shown in our blog, but you can try it alone.
Link Boxes
» EXAMPLE:
<html>
<head>
<style>
a:link,a:visited
{
display:block;
font-weight:bold;
color: #003;
background-color: #F60;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color: #C03;
}
</style>
</head>
<body>
<a href="http://easilylearnhtml.blogspot.com/" target="_blank">Link To Our blog</a>
</body>
</html>
» Result:
Result cannot be shown in our blog, but you can try it alone.
No comments:
Post a Comment