Confusion with link colors

Get Started
1

I am trying to use two different sets of link colors. I have set one set of colors in a class called “normallink” and the regular set of link colors for normal text situations. The colors and underline get confused. I set the text decoration to none. But a link with the normallink class will have the color of the standard active link color. Also the underline will appear. I assume this has something to do with inheritance. Any help would be appreciated.
Texas Pete



.normallink a:link {text-decoration:none; color:rgb(0,0,255); }
.normallink a:active {text-decoration:none; color:rgb(200,230,240); }
.normallink a:hover {text-decoration:none; color:rgb(175,50,69); }
a:link {text-decoration:none; color:rgb(0,0,255); }
a:active {text-decoration:none; color:rgb(200,230,240); }
a:hover {text-decoration:none; color:rgb(175,50,69); }
2

It looks like an inheritance issue with the code you provide.

A good approach is to set default link styles first, then variations afterwards…


/* default styles */
a:link {text-decoration:none; color:rgb(0,0,255); }
a:active {text-decoration:none; color:rgb(200,230,240); }
a:hover {text-decoration:none; color:rgb(175,50,69); }

/* custom styles */
.normallink a:link {text-decoration:none; color:rgb(0,0,255); }
.normallink a:active {text-decoration:none; color:rgb(200,230,240); }
.normallink a:hover {text-decoration:none; color:rgb(175,50,69); }

…that way all links will be styled using the default unless you provide a custom version

3

I may be missing something, but I don’t see any differences between your two sets of rules there. :slight_smile:

4

TechnoBear, Your not missing anything. I have been working at this so long. I have allowed the same rules to apply. Duh? Thank you so much. I will make appropriate changes. A new set of eyes is always helpfull.
Texas Pete

5

I know that feeling so well. :slight_smile: Glad I could help. (Although I’m not sure SuperTed would approve … :shifty:)

6

Hi,
I think you should be more specific about color in your code as if you want your normal link to be in red color then instead of writing rgb write the name of a specific color and for other/customized links write the name of any other color.

7

RGB values are a perfectly acceptable way of expressing colour in CSS, as are hexadecimals e.g. #FF0000.

8

Don’t forget that the order of these is important. This is the wrong order:

a:link {text-decoration:none; color:rgb(0,0,255); }
a:active {text-decoration:none; color:rgb(200,230,240); }
a:hover {text-decoration:none; color:rgb(175,50,69); }

To avoid unexpected behavior, the order should be—

:link
:visited
:hover
:active

Of course, it doesn’t matter if you leave some out, but the order is imporant.

There are various mnemonics for this, such as LoVe—HA!