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.
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.
0 Comments:
Post a Comment
<< Home