Stylesheets - Style Not Applying?

Author

Style Not Applying?

Alan Little

2003-12-22, 11:29 pm

I have these selectors:

A {
text-decoration: none;
}
A:link {color: #0077BC;}
A:visited {color: #0077BC;}
A:hover {color: #0077BC; text-decoration: underline;}
A:active {color: #0077BC;}

and I have this selector:

#NavPanel A {
font-weight: bold;
}

and I have these selectors:

..OutLink {
font-weight: normal;
}
A.OutLink:link {color: #DC0053;}
A.OutLink:visited {color: #DC0053;}
A.OutLink:hover {color: #DC0053; text-decoration: underline;}
A.OutLink:active {color: #DC0053;}

Inside NavPanel I have <A CLASS="OutLink">. It takes the color from the
OutLink selectors, but stays bold, and won't go to normal. I also tried
"lighter" and I tried numerical values, and I tried putting the font-
weight property in the A.OutLink selectors, but it doesn't change. I
tried moving .OutLink before the A selector in the file, but that doesn't
make any difference. What am I missing?

--
Alan Little
Phorm PHP Form Processor
http://www.phorm.com/

Neal

2003-12-23, 3:28 am

"Alan Little" <alan@n-o-s-p-a-m-phorm.com> wrote in message
news:Xns9459E4880F4CFalanphormcom@216.196.97.132...

quote:

> I have these selectors:
>
> A {
> text-decoration: none;
> }
> A:link {color: #0077BC;}
> A:visited {color: #0077BC;}
> A:hover {color: #0077BC; text-decoration: underline;}
> A:active {color: #0077BC;}
>
> and I have this selector:
>
> #NavPanel A {
> font-weight: bold;
> }
>
> and I have these selectors:
>
> .OutLink {
> font-weight: normal;
> }
> A.OutLink:link {color: #DC0053;}
> A.OutLink:visited {color: #DC0053;}
> A.OutLink:hover {color: #DC0053; text-decoration: underline;}
> A.OutLink:active {color: #DC0053;}
>
> Inside NavPanel I have <A CLASS="OutLink">. It takes the color from the
> OutLink selectors, but stays bold, and won't go to normal. I also tried
> "lighter" and I tried numerical values, and I tried putting the font-
> weight property in the A.OutLink selectors, but it doesn't change. I
> tried moving .OutLink before the A selector in the file, but that doesn't
> make any difference. What am I missing?

Try being more specific in the style sheet. Unless you're using the OutLink
class elsewhere in the NavPanel, using #NavPanel A.OutLink { font-weight:
normal; } ought to do the trick.

Steve Pugh

2003-12-23, 6:28 am

Alan Little <alan@n-o-s-p-a-m-phorm.com> wrote:

quote:

>#NavPanel A {
> font-weight: bold;
>}
>
>and I have these selectors:
>
>.OutLink {
> font-weight: normal;
>}
>
>Inside NavPanel I have <A CLASS="OutLink">. It takes the color from the
>OutLink selectors, but stays bold, and won't go to normal.

That's correct. The first style is more specific (it has an ID and an
element name, therefore specificity = 101) than the second (which just
has a class, specificity = 010). See
http://www.w3.org/TR/CSS2/cascade.html#specificity

Change the second selector to #NavPanel .OutLink and it will behave as
you desire.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>