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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Location
    The sunny side of the Alps
    Posts
    230
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Two types of links in CSS

    Hi!

    I have a CSS where I have defined the looks of links
    Code:
    a:link       { color=#cc0000; text-decoration: underline }
    a:visited    { color=#cc0000; text-decoration: underline }
    a:hover      { color=#006699; text-decoration: none }
    What I would like to do is to have another type of links on the page - with different colors and all. How can I do that?

    Thanks,
    Bostjan

  • #2
    Regular Coder
    Join Date
    Nov 2002
    Location
    India
    Posts
    159
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Create a class, as in,
    Code:
    a.link-style1:link { color=#cc0000; text-decoration: underline }
    a.link-style1:visited { color=#cc0000; text-decoration: underline }
    a.link-style1:hover { color=#006699; text-decoration: none }
    
    a.link-style2:link { color=red; text-decoration: overrline }
    a.link-style2:visited { color=green; text-decoration: overline }
    a.link-style2:hover { color=blue; text-decoration: none }
    Now when you want a link to be of link-style1 use the class attribute as follows:
    Code:
    <A class="link-style1">Link style1</A>
    When you want a link to be of link-style2 use the class attribute as follows:
    Code:
    <A class="link-style2">Link style2</A>

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    United Kingdom Confused: Often
    Posts
    859
    Thanks
    0
    Thanked 0 Times in 0 Posts
    remember that in CSS you use a colon instead of an equals mark

    so instead of this:

    Code:
    a.link-style1:link { color=#cc0000; text-decoration: underline }
    a.link-style1:visited { color=#cc0000; text-decoration: underline }
    ...etc......
    you should be writing this:

    Code:
    a.link-style1:link { color: #cc0000; text-decoration: underline }
    a.link-style1:visited { color: #cc0000; text-decoration: underline }
    redhead

  • #4
    Regular Coder
    Join Date
    Nov 2002
    Location
    India
    Posts
    159
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh yeah


  •  

    Posting Permissions

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