Changing link properties for different links

[danielk1985]

Hey! This is probably an easy question for you but anyway:

Instead of the default link properties, I changed them to grey for normal and visited, and a blue for active. This is fine, except (me being my awkward self) I decided to only keep those link properties for a specific set of links and I'd like to leave all other links to the default settings, but I obviously don't know how to do so. Can anyone help?

Thanks in advance.

[duniyadnd]

if you're familiar with CSS, you can use class tags I think, never tried it with links.

Duniyadnd

[danielk1985]

I haven't got a clue about CSS but I'll look into it...it's worth a try. Thanks for the suggestion :-)

[duniyadnd]

here's a good place to start:

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

Once you start getting the grasp for this, you can't let go, makes your code a lot neater and easy to manage.

Duniyadnd

[danielk1985]

Thanks again- I appreciate it...looks like I'll be busy for a while though!

[danielk1985]

OK...I've been playing around with CSS pretty much all day! Here's what I got to set a style for links:

<style type="text/css">

A:link {
text-decoration: none;
color: #CCCCCC;
background-color: transparent;
}

A:hover {
text-decoration: underline;
color: #CCCCCC;
background-color: transparent;
}

A:active {
text-decoration: none;
color: #0099CC;
background-color: transparent;
}

A:visited {
text-decoration: none;
color: #CCCCCC;
background-color: transparent;
}
</style>

The problem now is I made a whole new page to test this style on in case I messed up another page and half the links have one set of properties, being:

default blue underline, grey underlined on hover and #0099CC blue on active and then grey with no underline when visited.

...the other half of the links have a different set of properties, these being:

grey with no underline normally, then the same on hover, active, and visited states.

I have no idea what could be causing this to happen. I've tried a whole new set of properties in the CSS file and this split still happened only with different colours etc. PLEASE HELP!!

[duniyadnd]

Okay, I'm not certain what seems to be the problem, in the sense, which of the two you are looking for, but here, there's a simple rule which you have to follow for hyperlinks:

a:hover comes after a:link and a:visited in the CSS definition in order to be effective AND a:active comes after a:hover in the CSS definition in order to be effective!!

So, just change the order around, and it might help.

Hope this solves the problem, if not, let me know and say what you are looking for.. :D

Duniyadnd

[danielk1985]

I changed the order round to a:link, a:visited, a:hover and then a:active. All the links have the same properties but not the ones I tried setting them exactly...

A:link {
text-decoration: none;
color: #CCCCCC;
background-color: transparent;
}

Maybe it's just that I'm new to it and just clueless, but shouldn't that have a grey font colour and no underline? Either way- it shows up as the default still (blue with underline).

A:visited {
text-decoration: none;
color: #CCCCCC;
background-color: transparent;
}

This one works ok (visited links are grey and not underlined till hovered over)

A:active {
text-decoration: none;
color: #0099CC;
background-color: transparent;
}

The active state works linke it's meant to as well with colour and underline on hover settings.

I don't know why but since the others work ok (visited and active) but its obviously the "a:link" thats the problem but I can't see anything wrong with it. Maybe theres something I should be putting before it?

[duniyadnd]

Hiya, unfortunately, I can't help you with this problem because it comes out the way you wanted it in the first place on my browsers. You might want to check your body tag and see if you didn't define "link" and "vlink" in that. Just in case, send your whole page's code so we can see if you put some unecessary information that brings up the blue font color.

Duniyadnd

[Roy Sinclair]

I think the problem may be that you are using A:link when you should just use A.

[danielk1985]

I got the CSS script working now using an internal instead of external stylesheet. But now since we're already here...probly a pretty basic question - (can't you just tell I'm new at this?! I'm only 16 - you've gotta have patience with me ;-))

How do you create a separate layer of text that displays when the over state of a link is active?

Thanks for all your help and for baring with me- I've gotta learn somehow right?!