Some Of Cool Styles To Have Good Hyperlinks

Hi All My Dears Readers ;-)

I got this cool changes to add more features to your content that should have some of hyperlinks so you can change this default hyperlinks to have good hyperlinks, For example you can change font color on mouse over or change font size or font family on mouse over or another smart changes look like adding background color on mouse over, Just follow this simple steps to do it.

 Firstly: You can remove the default underline from any hyperlink just add this:

Any default link code will look like this:

<a href="URL">TEXT LINK<a>

Just add text-decoration and set it to none or look in this:

<a style="text-decoration:none;" href="URL">TEXT LINK<a>

Secondly: Also you can change font color on mouse over like this in head area:

<style type="text/css">
a.one:link {color: #ff0000}
a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}
</style>

,You can change colors code  #ff0000 .

Now to make your style working just add your class a.one in this code look like this:

<a class="one" href="URL">TEXT LINK</a>

Thirdly: If you want to change font family or font size on mouse over just add this styles in head area:

A)To change font family when you mouse over the link add this:

<style type="text/css">
a.four:link {color: #ff0000}
a.four:visited {color: #0000ff}
a.four:hover {font-family: monospace}
</style>

,You can change font monospace to Verdana or Arial or any other font families.
Now to make your style working just add your class a.four in this code look like this:

<a class="four" href="URL">TEXT LINK</a>

B)To change font size when you mouse over the link add this in head area:

<style type="text/css">
a.two:link {color: #ff0000}
a.two:visited {color: #0000ff}
a.two:hover {font-size: 150%}
</style>

,If you want to change size just change 150%.
Now to make your style working just add your class a.two in this code look like this:

<a class="two" href="URL">TEXT LINK</a>

Fourthly: To add background color or background image when you mouse over the link just add this code in head area:

<style type="text/css">
a.three:link {color: #ff0000}
a.three:visited {color: #0000ff}
a.three:hover {background: #66ff66;background-image: Image Url;}
</style>

,You can change color by editing color code #66ff66 and also you can add Image Url .

Now to make your style working just add your class a.three in this code look like this:

<a class="three" href="URL">TEXT LINK</a>

Have Fun And Well Done,