Creating 2 style sheets for links on a page

[Mike Azzopardi]

Hi there

I'm hoping someone can show me how to do this please.
I have a page where I want the links in the menu to act differently to the
links on main page (the colours, mouse over, font etc)

At the moment I have one style sheet that looks like this which is fine for
the main page:

a {
font-family: "Courier New", Courier, mono;
color: #0000FF;
}
body {
font-family: "Courier New", Courier, mono;
font-size: 16pt;
font-weight: bolder;
color: #660000;
}
a:hover {
font-family: "Courier New", Courier, mono;
color: #660000;
}

but I don't know how to make the menu links different. I am using
Dreamweaver MX. And the other thing is I have the Menu as an include file
which looks like this:

document.write('<table width="100%" height="2%" border=0 align="center"
cellpadding=0 cellspacing=0 bordercolor="#FFFFFF" hspace="2">'
+' <tr> '
+' <td bgcolor=#000066> '
+' <div align="center"><font size="4" face="Courier New, Courier,
mono"><strong><a href="../index.html">Home</a> '
+' - <a href="../donate.htm">Donate</a> - <a
href="../artists.htm">Artists</a> '
+' - <a href="../project.htm">The Project</a> - <a
href="../form/index.htm">Sign '
+' Up</a> - <a href="http://www.heifer.org"
target="_blank">Heifer.org</a> '
+' - <a href="../contact.htm">Contact</a> - <a
href="../links.htm">Links</a></strong></font></div></td>'
+' </tr>'
+' <tbody>'
+' </tbody>'
+' </table>');

Any help appriciated.

Best Regards
Mike

 

[Edwin van der Vaart]

Hi there

I'm hoping someone can show me how to do this please.
I have a page where I want the links in the menu to act differently to the
links on main page (the colours, mouse over, font etc)

Use class for <a> e.g.
<a class="menu" href="#">option 1</a>
<a class="menu" href="#">option 2</a>
<a class="menu" href="#">option 3</a>

in stylesheet
a.menu {color: #0000FF;}
a.menu:hover {color: #660000;}
--
Edwin van der Vaart
http://www.semi-conductor.nl/ Links to Semiconductors sites
http://www.evandervaart.nl/ Edwin's persoonlijke web site
Explicitly no permission given to Forum4Designers, onlinemarketingtoday,
24help.info and issociate.de to duplicate this post.

 

[Mike Azzopardi]

Thank you Edwin, you've just taught me <A> classes and it all works fine

Thanks again
Mike

 

[JDS]

Thank you Edwin, you've just taught me <A> classes and it all works fine

There are other ways to do it, as well. For example, giving the enclosing
block (in your case a <td> -- a bad idea, but I'll get to that in a
minnit) a class (or id) and then referencing all <a>'s within that
enclosing block.

e.g.

<style type="text/css">
td.menu a{
color: #fff;
}
td.menu a:hover{
color: #000;
}
</style>

<td class="menu">
<a href="butts">Butts</a>
</td>


.... Something like that.

I'd like to point out two glaring issues with your code (that I know you
weren't asking for input on, but I'm giving it anyway):

1) Don't use <FONT> tags!

2) Don't use <TABLE>s for layout


I think (1) is probably more important and easier to do away with. I mean,
you are clearly using CSS for a certain amount of styling already, so why
use <FONT> tags? Oh! I know! DREAMWEAVER. Ugh. DW is fine for some things
but it needs to be carefully reigned in and watched over to prevent it
from doing stuff that it shouldn't.

<soapbox>IMO, the greatest hazard to novice Web Developers is using a
crutch like Dreamweaver to LEARN HTML. Learn HTML very very very well
first, and then, if you like DW's interface or tools or whatever, then
use it. But do not start coding HTML and CSS with DW right away.</soapbox>


allright, later...