overriding link specifications

@dfinnJan 22.2004

i’m new to all this so i may not have worded this right.

my stylesheet.css file can be found at
~~[url]~~http://www.santarosacyclery.com/stylesheet.css[/url]

i have this for links:

A:link { font-family: Arial, Verdana, Geneva, Helvetica, Sans-Serif; font-size: 12px; color: 666666; text-decoration: none;
font-weight: bold;}
A:visited {font-family: Arial, Verdana, Geneva, Helvetica, Sans-Serif; font-size: 12px; color: 666666; text-decoration: none;
font-weight: bold; }
A:hover { font-family: Arial, Verdana, Geneva, Helvetica, Sans-Serif; font-size: 12px; color: 5B87C4; text-decoration: none;
font-weight: bold; }
A:active { font-family: Arial, Verdana, Geneva, Helvetica, Sans-Serif; font-size: 12px; color: 5B87C4; text-decoration: none;
font-weight: bold; }

but there’s a section of my site where I would like to change the color of the links. so i created a new class that looks liks so:

.white {
font-family: Arial, Verdana, Geneva, Helvetica, Sans-Serif;
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
}

however when I try and use that class like so:

<div class=”white”>
<a href=”about.aspx” class=”white”>Jeckyl 1000</a><br>
<a href=”members.aspx”>Jeckyl 2000</a><br>
<a href=”pics.aspx”>Gemini DH</a><br>
</div>

it doesn’t work. is there something special i have to do to get my new class to override the specs for my links?

Thanks
Dan

to post a comment

CSS

13 Comments(s) _↴

@pyroJan 22.2004 — #Change .white to a.white, and it should work better. Also, on the colors, you need to prepend a # to the hex numbers...

@fredmvJan 22.2004 — #Welcome to the forums.

I'll explain why it isn't working. In your class, you've defined some CSS style rules — you then applied that class to a [font=courier]<div>[/font] element, and thus, all text inside of it will follow those rules. For example, if you had the string "foo" inside of it, it would appear to be affected by your rules, but as you've already noticed, it is not affecting your links. Why? Simply because you haven't told it to. As already stated, your current code will only affect text inside of that element, and since the links already have some CSS associated with them, they simply will not be affected. To get it working correctly, you must specify that you want the links to have the style you've specified. To do this, your CSS must look like this:.white aThis will now read as "all [font=courier]<a>[/font] elements inside of the element in which has its [font=courier]class[/font] attribute defined as "white" will follow these CSS rules". And that's all there is to it. I'd also like to note that you shouldn't be using a fixed unit (i.e., px), primarily because IE has trouble scaling these fonts. I would suggest defining the font-size at the very least 1em or 100% — if you even define a font-size at all. This way, the user's preferred font-size will be displayed.

@pyroJan 22.2004 — #Also, compair my method with Fred's. Now that I look at your markup, I'm guessing you'll actually want Fred's, but take a look at the difference.

@fredmvJan 22.2004 — #[i]Originally posted by pyro [/i]

[B]Also, compair my method with Fred's. Now that I look at your markup, I'm guessing you'll actually want Fred's, but take a look at the difference. [/B][/QUOTE]I know, it's confusing. On one hand, he has the CSS "white" [font=courier]class[/font] applied to that [font=courier]<div>[/font] element, and on the other he has it applied to one of the links. It isn't very obvious what he's trying to achieve.

@pyroJan 22.2004 — #Yeah. When I first posted, I didn't even notice that he had the class applied to the div as well as the link. I just saw it in the link and posted that way... Well, at least now he has both... ?

@spufiJan 22.2004 — #For future reference, the CSS for your links could be done like this..

A { font-family: Arial, Verdana, Geneva, Helvetica, Sans-Serif; font-size: 12px; color: 666666; text-decoration: none;

font-weight: bold;}

A:visited { color: 666666; }

A:hover { color: 5B87C4; }

A:active { color: 5B87C4; }

Everything defined in "A" will also hold true for the states of "A." Just define the different colors in each of the different states and you're set.

@pyroJan 22.2004 — #Except you need a # sign before the hex number for the colors...

@dfinnauthorJan 22.2004 — #thanks a bunch guys for all the info.

.white a[/quote]
worked but
a.white[/quote]
didn't work.

Now that that's working I have another question. So that's completely overriding all of the link specs at the top of my stylesheet file. How can I now specify a hover spec for different links, or get it to use my existing hover spec?

Thanks again

Dan

@spufiJan 22.2004 — #[i]Originally posted by pyro [/i]

[B]Except you need a # sign before the hex number for the colors... [/B][/QUOTE]

Ah stupid late night posting. :p

@fredmvJan 22.2004 — #[i]Originally posted by dfinn [/i]

[B]Now that that's working I have another question. So that's completely overriding all of the link specs at the top of my stylesheet file. How can I now specify a hover spec for different links, or get it to use my existing hover spec? [/B][/QUOTE]No problem. You could do:.white a:hover

@dfinnauthorJan 22.2004 — #wierd. what i asked to have happen above is working in IE but not in Mozilla Firebird.

@pyroJan 22.2004 — #[i]Originally posted by dfinn [/i]

[B]a.white

didn't work.[/B][/QUOTE]Which means it didn't do what you wanted. It does, indeed work, though only on the first link (the one you gave the "white" class).

@dfinnauthorJan 22.2004 — #[i]Originally posted by fredmv [/i]

[B]No problem. You could do:.white a:hover [/B][/QUOTE]

exactly what I wanted. thanks.

Also in #CSS _↴

Problem with CSS (I think) in IE IE8 Fix for my <ul> ?Ive got a div...

Success!

Help @dfinn spread the word by sharing this article on Twitter...

Tweet This

overriding link specifications

13 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

overriding link specifications

13 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

13 Comments(s) _↴

Also in #CSS _↴