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 6 of 6
  1. #1
    Regular Coder Bengal313's Avatar
    Join Date
    Jun 2002
    Location
    Metro Detroit
    Posts
    298
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Custom Active, Hover, Visited Link

    Though out my site I have a common link style . But I need to have a different link style for a specific links. How can I create another style while keeping the default style.

    Code:
    A:link {
    	COLOR: #000071;
    	text-decoration: none;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    }
    A:visited {
    	COLOR: #000071;
    	text-decoration: none;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    }
    A:active {
    	COLOR: #000071;
    	text-decoration: none;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    }
    A:hover {
    	COLOR: #ff4400;
    	text-decoration: underline;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    }

    Is there a way to add the hover/visited/link/active/ style to a specific class.

    Code:
    .messagebodyheader {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	font-style: normal;
    	line-height: normal;
    	color: #003399;
    }
    "Knowledge Speaks But Wisdom Listens"

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    use a.myClassName:link { } and set a class attribute on your links.

  • #3
    Regular Coder
    Join Date
    Nov 2006
    Posts
    246
    Thanks
    13
    Thanked 26 Times in 24 Posts
    Of course there is.

    Code:
    a.messagebodyheader:hover {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	font-style: normal;
    	line-height: normal;
    	color: #003399;
    }
    Another tip. I noticed your style for A:link, A:visited, and A:active are the same. You can accomplish the same thing with less code if you do it like this:

    Code:
    A {
    	COLOR: #000071;
    	text-decoration: none;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    }
    A:hover {
    	COLOR: #ff4400;
    	text-decoration: underline;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    }

  • #4
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Quote Originally Posted by Majoracle View Post
    Another tip. I noticed your style for A:link, A:visited, and A:active are the same. You can accomplish the same thing with less code if you do it like this:

    Code:
    A {
        COLOR: #000071;
        text-decoration: none;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
    }
    A:hover {
        COLOR: #ff4400;
        text-decoration: underline;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
    }
    Or, even better:
    Code:
    a {
        color: #000071;
        font: 12px Arial, Helvetica, sans-serif;
        text-decoration: none;
    }
    a:hover {
        color: #f40;
        text-decoration: underline;
    }

  • #5
    New Coder
    Join Date
    Dec 2007
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Changed...
    Last edited by JoshTrav; 12-11-2007 at 10:27 PM.

  • #6
    Regular Coder Bengal313's Avatar
    Join Date
    Jun 2002
    Location
    Metro Detroit
    Posts
    298
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Worked like a charm!
    "Knowledge Speaks But Wisdom Listens"


  •  

    Posting Permissions

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