Anchor Tags CSS Styles
Link – initial
Hover – Mouse on link
Active – Time between click & reach target page
Visited – After click , come back to back page
Example-1
<html>
<head>
<style>
a:link{
color :red;
text-decoration :none;
font-weight :bold;
}
a:hover{
color :green;
text-decoration :none;
font-weight :bold;
font-size :30;
}
a:active{
color :black;
text-decoration :none;
font-weight :bold;
font-size :50;
}
a:visited{
color :blue;
text-decoration :none;
font-weight :bold;
font-size :20;
}
</style>
</head>
<body>
<a href="a.html"> Page A </a> <br>
<a href="b.html"> Page B </a>
</body>
</html>
Example-2
<html>
<head>
<style>
a:link{
color :red;
text-decoration :none;
font-weight :bold;
}
a:hover{
color :green;
text-decoration :none;
font-weight :bold;
font-size :30;
}
a:active{
color :black;
text-decoration :none;
font-weight :bold;
font-size :50;
}
a:visited{
color :blue;
text-decoration :none;
font-weight :bold;
font-size :20;
}
a.abc:link{
color :green;
text-decoration :none;
font-weight :bold;
}
a.abc:hover{
color :black;
text-decoration :none;
font-weight :bold;
font-size :30;
}
a.abc:active{
color :blue;
text-decoration :none;
font-weight :bold;
font-size :50;
}
a.abc:visited{
color :red;
text-decoration :none;
font-weight :bold;
font-size :20;
}
</style>
</head>
<body>
<a href="a.html"> Page A </a> <br>
<a class="abc" href="b.html"> Page B </a>
</body>
</html>
Link – initial
Hover – Mouse on link
Active – Time between click & reach target page
Visited – After click , come back to back page
Example-1
<html>
<head>
<style>
a:link{
color :red;
text-decoration :none;
font-weight :bold;
}
a:hover{
color :green;
text-decoration :none;
font-weight :bold;
font-size :30;
}
a:active{
color :black;
text-decoration :none;
font-weight :bold;
font-size :50;
}
a:visited{
color :blue;
text-decoration :none;
font-weight :bold;
font-size :20;
}
</style>
</head>
<body>
<a href="a.html"> Page A </a> <br>
<a href="b.html"> Page B </a>
</body>
</html>
Example-2
<html>
<head>
<style>
a:link{
color :red;
text-decoration :none;
font-weight :bold;
}
a:hover{
color :green;
text-decoration :none;
font-weight :bold;
font-size :30;
}
a:active{
color :black;
text-decoration :none;
font-weight :bold;
font-size :50;
}
a:visited{
color :blue;
text-decoration :none;
font-weight :bold;
font-size :20;
}
a.abc:link{
color :green;
text-decoration :none;
font-weight :bold;
}
a.abc:hover{
color :black;
text-decoration :none;
font-weight :bold;
font-size :30;
}
a.abc:active{
color :blue;
text-decoration :none;
font-weight :bold;
font-size :50;
}
a.abc:visited{
color :red;
text-decoration :none;
font-weight :bold;
font-size :20;
}
</style>
</head>
<body>
<a href="a.html"> Page A </a> <br>
<a class="abc" href="b.html"> Page B </a>
</body>
</html>
No comments:
Post a Comment