Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Sep 2002
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Different colors for links

    How would I do the following:

    Have text links on a page that are colored "Black". They stay black even when the text links were visited (so it just looks full time black).

    Then on the same page, have different text links that are colored Red, and also Red whether they have been visited or not.

    I only know how to do this for 1 color.

    Any help is appreciated!

  • #2
    Senior Coder Nightfire's Avatar
    Join Date
    Jun 2002
    Posts
    4,265
    Thanks
    6
    Thanked 48 Times in 48 Posts
    <style type="text/css">

    a.black{
    color:#000;
    }

    a.red {
    color:#ff0000;
    }
    </style>

    ...

    <a href="page.html" class="black">Black link</a>
    <a href="page.html" class="red">Red link</a>

  • #3
    New Coder
    Join Date
    Nov 2003
    Location
    Sasolburg, South Africa
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Different colors for links

    Perhaps you should add the following to your document's head section:

    <style type="text/css">

    a:link { text-decoration: none; color: black}
    a:visited { text-decoration: none; color: black }
    a:hover { text-decoration: none; color: red }
    a:active { text-decoration: none; color: blue }

    </style>

    When the mouse is over the link, the link turns red. Once you have clicked on the link it turns blue, until you click elsewhere on the page. Then it will return to black.

    You can change "text-decoration: none" to "text-decoration: underline" if you want to have underlined text at some stage.

    In addition you can specify the text to appear bold by adding: font-weight: bold, or you can change to a specific font by adding: font 10pt Sans-serif, etc.

    I hope this helps.

    Regards
    Dieter

  • #4
    Senior Coder Nightfire's Avatar
    Join Date
    Jun 2002
    Posts
    4,265
    Thanks
    6
    Thanked 48 Times in 48 Posts
    As he only wanted it to be one colour, I don't see why your post is relavant

  • #5
    New Coder
    Join Date
    Sep 2002
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So Dieter, in this:

    <style type="text/css">

    a:link { text-decoration: none; color: black}
    a:visited { text-decoration: none; color: black }
    a:hover { text-decoration: none; color: red }
    a:active { text-decoration: none; color: blue }

    </style>


    Is it possible to make are a.links......so I can have some text links that are red, and some are blue, etc?

    Thanks

  • #6
    Regular Coder
    Join Date
    Dec 2003
    Location
    USA
    Posts
    230
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #7
    New Coder
    Join Date
    Nov 2003
    Location
    Sasolburg, South Africa
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Eric,

    I have tried to do that by inserting

    <style type="text/css">
    a:link { text-decoration: underline; color: black; font 10pt Verdana}
    a:visited { text-decoration: none; color: black }
    a:hover { text-decoration: none; color: red }
    a:active { text-decoration: none; color: blue }
    </style>

    before a number of <a href="page.htm"> links using different colours for different actions, but found that all links reverted to the colours specified in the last insertion. Even if that did work it would be cumbersume. Therefore, for different coloured links in the same document the best option appears to do what Nightfire suggested in his reply.

    Also, visit the site that Paul Jr suggests in his reply. There you will find some well documented examples.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •