How to have dfferent CSS Sellectors in the same HTML file, for eg.: some links in the top of the page should have different set of style when compared to bottom links of the page?

If I understand your question correctly then you can achieve this by using the following CSS.

For a class selector such as .footer you can use:

.footer{
position:relative;
text-align:right;
font-size:10px;
}
.footer a:link {
color:#0000CC;
text-decoration:underline;
}
.footer a:hover{
color:#FF0000;
text-decoration:none;
}
footer a:visited{
color:#00FF00;
text-decoration:underline;
}

notice that you can also assign Pseudo-Classes different properties as well.

you use the same technique for id selectors as well. For instance:

#footer1 { color: #FFFFFF; }

#footer1 a:link {
font-weight: bold;
color:#0000CC;
}
#footer1 a:hover {
font-weight: bold;
color:#FF0000;
}
#footer1 a:visited {
font-weight: bold;
color:#00FF00;
}

You will still want to use the regular a:link a:hover a:visited for all other links on the page.





Edited by - dtiger2k on 18 Feb 2006 07:45:55

Edited by - dtiger2k on 18 Feb 2006 07:48:42