Results 1 to 7 of 7

Thread: 2 links one page

  1. #1
    Join Date
    Dec 2007
    Location
    Mississauga
    Posts
    166
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default 2 links one page

    I have a footer to a page that uses css to assign a link colour, mouse over colour, visted colour etc.

    But now I have a link on the page and need to assign it new css values for the link colour, mouse over etc. The css is an external style sheet it's not embedded in the html.

    How would I go about having the page bring up a different colour from the css or do I need a new css just for the links, and even then how do I assign the new css?

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Can you please provide a link to your page and the code. We can't understand it otherwhise.
    Jeremy | jfein.net

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You can assign each link or group of links a unique class and style them in the existing stylesheet by setting the rules for each of those classes.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Dec 2007
    Location
    Mississauga
    Posts
    166
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    You can assign each link or group of links a unique class and style them in the existing stylesheet by setting the rules for each of those classes.
    Ok, I understand most of that except setting rules of those classes, I don't know what that means.

  5. #5
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    I'm assuming you css code for the links looks something like this:
    Code:
    a {
    color:blue;
    }
    a:hover {
    color:green;
    }
    a:visited {
    color:red;
    }
    //etc...
    What you need to do is give the link you want do be different an id value (or class value in case you have more than one, id values should only be given to one element per page). E.g.
    HTML Code:
    <a href="http://www.example.com/" id="anything">I'm special</a>
    Then just add this to the css code:
    Code:
    #anything {
    color:pink;
    }
    #anything:hover {
    color:orange;
    }
    #anything:visited {
    color:yellow;
    }
    Of course you style it the way you want and give it what id value you want.

    If you have more than one link that you want to be different, use class values:
    HTML Code:
    <a href="http://www.example.com/" class="somethingelse">We're special</a>
    <a href="http://www.example.com/" class="somethingelse">We're special</a>
    <a href="http://www.example.com/" class="somethingelse">We're special</a>
    The css code would be almost the same except that class values have a dot in front of them instead of the number sign that the id values had:
    Code:
    .somethingelse {
    color:pink;
    }
    .somethingelse:hover {
    color:orange;
    }
    .somethingelse:visited {
    color:yellow;
    }
    Last edited by jscheuer1; 12-19-2008 at 04:02 PM. Reason: fix typo

  6. The Following User Says Thank You to Snookerman For This Useful Post:

    nate51 (12-19-2008)

  7. #6
    Join Date
    Dec 2007
    Location
    Mississauga
    Posts
    166
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Default

    Snookerman, that did it, thanks so much for the help and the example code. It's easier than I thought it would be.

  8. #7
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    @nate51 You're welcome and good luck with your page!

    @jscheuer1 Thanks for the edit, I missed that when copying and pasting .

Bookmarks

Posting Permissions

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