CSS Links can be styled with any CSS property like color, background, font-size, font-family, border etc.
Links can be styled as per as links states.
CSS Links properties are as below accouring to four states.
- a:link - a normal, unvisited hyperlinks.
- a:visited - user has visited hyperlinks.
- a:hover - a link when the user mouses over it
- a:active - user hase clicked hyperlinks.
Syntax :
<style type = "text/css">
a:link {}
a:visited {}
a:hover {}
a:active {}
</style>
Set the Color of unvisited, visited ,mouses overed hyperlinks:
<html>
<head>
<title>Learn Css hyperlinks tutorials by aryatechno</title>
<style type = "text/css">
a:link { color:#0000FF;}
a:visited { color:#333333;}
a:hover { color:#FFFF00;}
a:active { color:#FF0000;}
</style>
</head>
<body>
<p> <a href="">PHP</a> </p>
<p> <a href="">CSS</a> </p>
<p> <a href="">JAVA</a> </p>
<p> <a href="">C# NET</a> </p>
</body>
</html>
Set the background color to hyperlinks:
The background-color property can be used to specify a background color for links as per as below example.
<html>
<head>
<title>Learn Css hyperlinks tutorials by aryatechno</title>
<style type = "text/css">
a:link { background-color:#FF0000; height:35px; width:150px;}
</style>
</head>
<body>
<p> <a href="" style="">PHP</a> </p>
<p> <a href="">CSS</a> </p>
</body>
</html>
Output :
Set the border to hyperlinks:
The border property can be used to specify a border for links as per as below example.
<html>
<head>
<title>Learn Css hyperlinks tutorials by aryatechno</title>
<style type = "text/css">
a:link { border:solid 1px #FF0000; height:35px; width:190px;}
</style>
</head>
<body>
<p> <a href="" style="">PHP</a> </p>
<p> <a href="">CSS</a> </p>
</body>
</html>
Output :
Set Text Decoration to hyperlinks:
The text-decoration property is used to remove underlines from links as per as below example.
<html>
<head>
<title>Learn Css hyperlinks tutorials by aryatechno</title>
<style type = "text/css">
a:link { text-decoration: none;}
</style>
</head>
<body>
<p> <a href="">PHP</a> </p>
<p> <a href="">CSS</a> </p>
</body>
</html>
Output :
Comments