>> KYSCORP.COM TUTORIALS >> CSS Tutorials

CSS and links

You could easily customize the links in all your pages with a CSS file, for this you have to know that :

color:#C7C34C      //is the Link color
text-decoration:none       //gives a non underlined link
text-decoration:underline      //gives an underlined link
text-decoration:overline      //gives an overlined link
text-decoration:overline underline      //gives an overlined & underlined link
text-decoration:line-through      //gives a striked link
hover   //Indicates the roll-over effect

Example: using many possible times of link attributes:
 


<style type="text/css">
a.link1
{
color:#c7c34c;
text-decoration:none;
font-weight:bold;
}
a.link1:hover
{
color:#0099cc;
text-decoration:underline;
font-weight:bold;
}
a.link2
{
color:#0099cc;
text-decoration:underline;
font-weight:bold;
}
a.link2:hover
{
color:#cccccc;
text-decoration:underline overline;
font-weight:bold; }
a.link3
{
color:#c0c0c0;
text-decoration:underline;
font-weight:bold;
}
a.link2:hover
{
color:#990000;
text-decoration:none;
font-weight:bold; }

</style>
We call these classes of links this way:  <a href="http://www.Kyscorp.com/" class="link1">Kyscorp</a> or <a href="http://www.Kyscorp.com/" class="link3">Kyscorp</a>
 

We can also put this in an external CSS file (we name it for instance stylesheet.css) and call it this way: <link href="stylesheet.css" rel="stylesheet" type="text/css">