Creating 2 style sheets for links on a page

Discussion in 'HTML' started by Mike Azzopardi, May 4, 2006.

  1. 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
     
    Mike Azzopardi, May 4, 2006
    #1
    1. Advertising

  2. Mike Azzopardi wrote:
    > 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.
     
    Edwin van der Vaart, May 4, 2006
    #2
    1. Advertising

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

    Thanks again
    Mike

    "Edwin van der Vaart" <> wrote in message
    news:vIm6g.10686$zc1.350@amstwist00...
    > Mike Azzopardi wrote:
    >> 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, May 4, 2006
    #3
  4. Mike Azzopardi

    JDS Guest

    On Thu, 04 May 2006 13:14:35 +0000, Mike Azzopardi wrote:

    > 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...
    --
    JDS | lid
    | http://www.newtnotes.com
    DJMBS | http://newtnotes.com/doctor-jeff-master-brainsurgeon/
     
    JDS, May 4, 2006
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Kevin Spencer

    Re: Using external style sheets

    Kevin Spencer, Jul 9, 2003, in forum: ASP .Net
    Replies:
    0
    Views:
    368
    Kevin Spencer
    Jul 9, 2003
  2. Replies:
    1
    Views:
    802
    Bertilo Wennergren
    Nov 24, 2003
  3. JT
    Replies:
    8
    Views:
    4,486
  4. Carl Corcoran
    Replies:
    1
    Views:
    279
    Bob Barrows
    Nov 12, 2003
  5. Jake Barnes
    Replies:
    6
    Views:
    202
    Lawrence Krubner
    Apr 12, 2009
Loading...

Share This Page