[dragonfly]

Can anybody give me some quick pointers (or atleast tell me where to find the answer) I'm playing with some layouts on a web page that has CSS. All the links are defined so that when you hover over them they change to a set size\colour etc.

however I want to have a bigger link at the bottom of the page as a call to action. I'm using <h2> tags round it which get it to the right size, howver when you hover over it, it changes to the CSS size. How can I have it so that it still changes colour etc. but doesn't change size.

[UKSBD]

h2 {font-size:120%;}
h2 a:hover {font-size:120%;}

[dragonfly]

Is thier a way of doing that without editing the css?

[UKSBD]

<h2 style="font-size:120%;">

[dragonfly]

Thanks, using your points and a bit of google, I've worked out what I wanted. Basically I didn't want to hack around with the global CSS to achieve my result, as that could effect other pages.

So what I did was put the following in the body of the html

<style type="text/css">
h2 {color: #ffffff; font-family: Arial; font-weight:bold; font-size:18px }
h2 a:hover { color: red; font-family: Arial;font-weight:bold; font-size:19px;}
</style>

What I find strange and I can't explain is the fin-size is different in both settings to keep the resulting text the same. Strange

Thanks

Dave.

[nass]

Try

<style type="text/css">
h2 a {color: #fff; font-family: Arial; font-weight:bold; font-size:19px; }
h2 a:hover { color: red; font-family: Arial;font-weight:bold; font-size:19px;}
</style>

or if you prefer 18px

<style type="text/css">
 h2 a {color: #fff; font-family: Arial; font-weight:bold; font-size:18px; }
 h2 a:hover { color: red; font-family: Arial;font-weight:bold; font-size:18px;}
 </style>

Not really strange - you'd missed out the a so it's inheriting it from elsewhere would be my guess