CSS Links

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.

  1. a:link - a normal, unvisited hyperlinks.
  2. a:visited - user has visited hyperlinks.
  3. a:hover - a link when the user mouses over it
  4. 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 :

PHP

CSS

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 :

PHP

CSS

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 :

PHP

CSS

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

89701