...

View Full Version : Custom Active, Hover, Visited Link



Bengal313
12-11-2007, 10:41 PM
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.



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.



.messagebodyheader {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: normal;
color: #003399;
}

Apostropartheid
12-11-2007, 11:12 PM
use a.myClassName:link { } and set a class attribute on your links.

Majoracle
12-11-2007, 11:14 PM
Of course there is.


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:


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;
}

Apostropartheid
12-11-2007, 11:19 PM
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:


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:
a {
color: #000071;
font: 12px Arial, Helvetica, sans-serif;
text-decoration: none;
}
a:hover {
color: #f40;
text-decoration: underline;
}

JoshTrav
12-11-2007, 11:24 PM
Changed...

Bengal313
12-12-2007, 10:11 PM
Worked like a charm!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum