CSS Link Styling

css link styling

Link  is an important element in web design. Link can be create by  HTML Link Code & can be modified by css link styling properties.

Dear, reader here,i will discuss how to styling a  link by css property that will be helpful for your better experience in the field of css3.

CSS Link:

Link can be modified in different ways on the basis of what state the are in Like:

1. a:link >defines a uninvited or normal link.

2. a:hover > defines a link when a user mouse over on it.

3. a:visited > defines a link which is  visited by a user.

4. a:active > defines a link the moment it is clicked.

For Example:

<style>
a:link {color:red;}      /* unvisited link */

a:hover {color:green;} /* mouse over link */

a:visited {color:blue;} /* visited link */ 

a:active {color:black;} /* selected link */
</style>

Example With HTML Code:

<html>
<head>
<style>
a:link {color:red;}       /* unvisited link */
a:visited {color:blue;} /* visited link */
a:hover {color:green;} /* mouse over link */
a:active {color:black;} /* selected link */
</style>
</head>

<body>
<p><b><a href=”http://knowledgediarybd.com/css-list-styling/” >This is a test link</a></b></p>

</body>
</html>

Out put of the above code:

This is a test link

Background Color

Background-color property defines the background color for a link:

For Example:

<style>
a:link {background-color:red;}      /* unvisited link */

a:hover {background-color:green;} /* mouse over link */

a:visited {background-color:yellow;} /* visited link */ 

a:active {background-color:black;} /* selected link */
</style>

Example With HTML Code:

<html>
<head>
<style>
a:link {background-color:red;} /* unvisited link */

a:hover {background-color:green;} /* mouse over link */

a:visited {background-color:yellow;} /* visited link */

a:active {background-color:black;} /* selected link */</style>
</head>

<body>
<p><a href=”http://knowledgediarybd.com/php/php-operators/” >This is a test link</a></p>

</body>
</html>

Out put of the above code:                                                                                     

link

Related Post or You may Interest on the following post:

Like Our Facebook Page To Get Update

Speak Your Mind