|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
#1
January 7th, 2002, 03:07 PM
|
|||
|
|||
|
CSS > Inheriting Style
I'm struggling to understand how styles are inherited. My problem is this... I want to have more than one style for anchor tags, but am not successful in doing so. Here is what is in my stlye sheet...
Code:
A:link {
font-family: Tahoma, Verdana, sans-serif;
font-size: 11px;
color: #336699;
}
A:visited {
font-family: Tahoma, Verdana, sans-serif;
font-size: 11px;
color: #6699CC;
}
A:hover {
font-family: Tahoma, Verdana, sans-serif;
font-size: 11px;
color: #003366;
}
.second_style {
font-family: Tahoma, Verdana, sans-serif;
font-size: 15px;
color: #0000FF;
font-weight: bold;
text-decoration: none;
}
This causes EVERY linkable text have these attributes. However, when I want to have a different style, and assign it a different CLASS, it no workee. Like this: Code:
<A HREF="yada.htm" CLASS="second_style">Text Here</A> Still, the style has the global anchor style. What am I doing wrong? I've even tried an inline SPAN style inside the anchor tag, without success. Thanks in advance!
__________________
Tony Melendez tony dizat amerigo dizot com http://www.amerigo.com Last edited by bamaster : January 7th, 2002 at 03:18 PM.
|
|
#2
January 7th, 2002, 03:45 PM
|
|||
|
|||
|
Psuedo classes have a higher precedence than regular classes.
In your case, a:link is a psuedoclass and .second_style is a regular class. so a:link overrides .second_style. You can fix this by using a generic anchor style like: A { font-family: Tahoma, Verdana, sans-serif; font-size: 11px; color: #336699; } (this is basically the same thing as A:link anyway so I would do it this way) or by making the second_style class apply solely to the anchor element with A.second_style { font-family: Tahoma, Verdana, sans-serif; font-size: 15px; color: #0000FF; font-weight: bold; text-decoration: none; }
|
|
#3
January 7th, 2002, 03:59 PM
|
|||
|
|||
|
Thank you. I was not aware of Pseudo Classes. Good to know. I will make those edits.
Followup question: within "A.second_style{}", is it possible to assign Hover and Visited attributes? Thanks again!
|
|
#4
January 7th, 2002, 04:19 PM
|
|||
|
|||
|
I've kinda answered my own question, heh. I just kept the Pseudo Class but only with the hover properties...
Code:
A:link {
color: #336699;
}
A:visited {
color: #6699CC;
}
A:hover {
color: #003366;
}
.second_style {
font-family: Tahoma, Verdana, sans-serif;
font-size: 13px;
color: #336699;
font-weight: bold;
text-decoration: none;
}
Works like a charm!
|
|
| Viewing: Dev Shed Forums > Web Design > CSS Help > CSS > Inheriting Style |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
