In css3 there multiple style can be applied on a link.
Following styles are given and explained below
1) color
2) font-size
3) background-color
4) font-family
5) text-decoration
Link colors
There is an example of link color is given below with source code.
<style type="text/css">
a{
color: blue;
}
</style>
<a href="https://www.webtags.com.pk" target="_blank">Click here to go home</a>
Output of above code
Link's font size
There is an example of link's font-size is given below with source code.
<style type="text/css">
a{
font-size: 16px;
color: blue;
}
</style>
<a href="https://www.webtags.com.pk" target="_blank">Click here to go home</a>
Output of above code
Link's background-color
There is an example of link background-color is given below with source code.
<style type="text/css">
a{
background-color: orange;
color: blue;
}
</style>
<a href="https://www.webtags.com.pk" target="_blank">Click here to go home</a>
Output of above code
Link's font-family
There is an example of link's font-family is given below with source code.
<style type="text/css">
a{
font-family: serif;
color: blue;
}
</style>
<a href="https://www.webtags.com.pk" target="_blank">Click here to go home</a>
Output of above code
Link's text-decoration
There is an example of link's text-decoration is given below with source code.
<style type="text/css">
.a1{
text-decoration: underline;
color: blue;
}
.a2{
text-decoration: none;
color: blue;
}
</style>
<a class="a1" href="https://www.webtags.com.pk" target="_blank">Click here to go home</a><br/>
<a class="a2" href="https://www.webtags.com.pk" target="_blank">Click here to go home</a>
Output of above code
Properties of links are given below.
In css3 there multiple style can be applied on a link.
Following styles are given and explained below
1) a:link A link which is not visited
2) a:visited A link which has visited by some user
3) a:hover A link effected with hover property
4) a:active A link which is active
All of above properties about a link are explained in the given example.
<style type="text/css">
a:link{
color: blue;
}
a:visited{
color: orange;
}
a:hover{
background-color: lightgreen;
}
a:active{
color: red;
}
</style>
<a href="https://www.webtags.com.pk" target="_blank">Click here to go home</a>
Output of above code
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
