Hello friends, I am designing a sign in which I will like to categorize my hyper-links into 2 categories, some with background and change on mouse-over. the second without background but change when mouse-over. but i dont know how to separate these 2 categories from my style sheet. pls help.

 

regards

CSS:

/* For hyperlinks without background */
a, a:visited{
   color: blue; /* Colour of hyperlink text */
}
a:hover, a:visited:hover{
   color: red; /* Colour of hovered text */
}
/* For hyperlinks with background */
a.bg, a.bg:visited{
   color: blue; /* Colour of hyperlink text */
   background: red; /* Colour of background */
}
a.bg:hover, a.bg:visited:hover{
   color: red; /* Colour of hovered text */
   background: blue; /* Colour of hovered background */
}

 

HTML

<a href="#" title="Hyperlink title">This hyperlink will not have a background</a>
<a href="#" title="Hyperlink title" class="bg">This hyperlink will have a background</a>

 

The colours are horrible, but you get the idea

You also can use it:

<style type="text/css">
a {color: #3366FF;}
a:hover {color:#FFCC66}
.red a {color: #FFF; background: #F00;}
.red a:hover {color: #00F; background: #F00;}
</style>

<div>It is a <a href="">Hyperlink</a></div>
<div class="red">It is a <a href="">Hyperlink</a>. It is a <a href="">Hyperlink</a>.</div>

Don't forget a:focus !!!