CSS lessosn learned

Two annoying facts about CSS standards (annoying if you are not a very organized person):

1. Watch out for the spaces within your CSS. Sample:

This code will work:

a.clsMenuLink:link{font-family: Trebuchet, Tahoma, Arial;font-size :11px;font-weight:bold;color:#000000;text-decoration:none;}
a.clsMenuLink:visited{font-family: Trebuchet, Tahoma, Arial;font-size :11px;font-weight:bold;color:#000000;text-decoration:none;}
a.clsMenuLink:active{font-family: Trebuchet, Tahoma, Arial;font-size :11px;font-weight:bold;color:#000000;text-decoration:none;}
a.clsMenuLink:hover {font-family: Trebuchet, Tahoma, Arial;font-size :11px;font-weight:bold;color:#000000;text-decoration:underline;}

This code will not work:

a.clsMenuLink: link{font-family: Trebuchet, Tahoma, Arial;font-size :11px;font-weight:bold;color:#000000;text-decoration:none;}
a.clsMenuLink: visited{font-family: Trebuchet, Tahoma, Arial;font-size :11px;font-weight:bold;color:#000000;text-decoration:none;}
a.clsMenuLink: active{font-family: Trebuchet, Tahoma, Arial;font-size :11px;font-weight:bold;color:#000000;text-decoration:none;}
a.clsMenuLink: hover{font-family: Trebuchet, Tahoma, Arial;font-size :11px;font-weight:bold;color:#000000;text-decoration:underline;}

Notice the space after the ":" and before the "link" or "visited" or "hover".

2. Watch out for the order within your CSS properties definition. Sample:

This code will work:

a.clsMenuLink:link{font-family: Trebuchet, Tahoma, Arial;font-size :11px;font-weight:bold;color:#000000;text-decoration:none;}
a.clsMenuLink:visited{font-family: Trebuchet, Tahoma, Arial;font-size :11px;font-weight:bold;color:#000000;text-decoration:none;}
a.clsMenuLink:active{font-family: Trebuchet, Tahoma, Arial;font-size :11px;font-weight:bold;color:#000000;text-decoration:none;}
a.clsMenuLink:hover {font-family: Trebuchet, Tahoma, Arial;font-size :11px;font-weight:bold;color:#000000;text-decoration:underline;}

This code will not work

a.clsMenuLink:hover {font-family: Trebuchet, Tahoma, Arial;font-size :11px;font-weight:bold;color:#000000;text-decoration:underline;}
a.clsMenuLink:link{font-family: Trebuchet, Tahoma, Arial;font-size :11px;font-weight:bold;color:#000000;text-decoration:none;}
a.clsMenuLink:visited{font-family: Trebuchet, Tahoma, Arial;font-size :11px;font-weight:bold;color:#000000;text-decoration:none;}
a.clsMenuLink:active{font-family: Trebuchet, Tahoma, Arial;font-size :11px;font-weight:bold;color:#000000;text-decoration:none;}

Notice that the "hover" behavior is being defined first in the sample that does not work.

- All elements above will become obvious if you also have in your HTML code the following:
<a class="clsMenuLink" href="#">pia pia pia</a>
- The purpose of the defined classes is to have a link text that gets underlined only on mouse over.


Thx, Rox.