CSS being over-ridden by the a. in the stylesheet

[TraceyHand]

Be gentle with me, please

I'm trying really hard to get my head round CSS and the stylesheet but I'll be the first to admit I am struggling at times.

I've created some a layout for "bikes for sale" information and I want to add an email link.
Easy, I can do that bit...but I want to style it.
So, I created the following in my stylesheet

.bikelink {
color:#FF0000;
font-size:16px;
font-weight:bold;
text-decoration:underline;
}

only thing is..it's being over-ridden by the a:hover already in the stylesheet.

I'm sure this is probably a dumb Q, but how can I prevent or get around that?

thanks for reading (you can stop laughing now )

Editted to add link, now it's uploaded! http://www.jesterstrickbits.co.uk/ac...94_CBR600.html (very work in progress this page, btw!)

[peblaco]

A dot specifies a class but it's generally a class for text or spans. To define a class for a link it needs an "a" in front of it.

[TraceyHand]

ooooooooh..thanks, Louise

God, I know nothing about CSS and I really am trying to learn, honest!

Fixed it by just putting the 'a' in ....that's the bit I didn't know.

I might look at putting it all into the bikeinfo one....if I can work out how to merge the 2...I'm sure I can

thank you, thank you, thank you...

I won't declare my undying love or anything...you have enough people fighting over you as it is

[TraceyHand]

hmmmmmm

ok...worked perfectly entering it as .bikelink a{

BUT...the hover state in IE7 is reverting to the grey, smaller text..even though in FF it's fine and Firebug isn't showing it as using any of the other CSS

I didn't really want to style each stage of the link, I wanted it to stay the same.. shouldn't it be staying the same anyway?


EDIT...never mind..for some reason it was only doing it in the offline preview...it's working fine now it's uploaded

Thanks again

[Orchid]

to change the hover you need to use a pseudo class which basically means that you need to add a colon after the "a" and then define the state of the link that you are trying to change. Below is copied from

http://www.w3schools.com/css/css_pseudo_classes.asp

Anchor Pseudo-classes

A link that is active, visited, unvisited, or when you mouse over a link can all be displayed in different ways in a CSS-supporting browser:

a:link {color: #FF0000} /* unvisited link */
a:visited {color: #00FF00} /* visited link */
a:hover {color: #FF00FF} /* mouse over link */
a:active {color: #0000FF} /* selected link */

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!
Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!
Note: Pseudo-class names are not case-sensitive.

Pseudo-classes and CSS Classes
Pseudo-classes can be combined with CSS classes:
a.red:visited {color: #FF0000}<a class="red" href="css_syntax.asp">CSS Syntax</a>If the link in the example above has been visited, it will be displayed in red.

Therefore

.bikelink a:hover {color:#FF0000;
font-size:16px;
font-weight:bold;
text-decoration:underline;
}

[fergusw]

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!
Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!

Good post.

A simple memory mnemonic friendly acronym is used by most people to remember the order.

LoVeHAte is a common one.
i.e.
Lo = Link
Ve = Visted
H = Hover
Ate = Active

I've seen many others:
London Victoria Hospital Association
Little Vicky Has Adhd
Look! Voldermort Hates 'Arry

this could run and run .....