Assigning a class to specific text links to change their colour - help appreciated

[Bert Coules]

I've searched around for help on this problem but can't find anything that seems specifically relevant.

 

In the small and straightforward HTML5/CSS site that I'm designing offline, I want to change the colour attributes of text links according to what background they appear on. In the CSS file I have this as an overall command:

a:link   {color:#CCCCFF; background-color:transparent; text-decoration:none}

and so on, for visited, hover and active. This works perfectly and affects every link. I also have this, immediately following:

a.bluelink:link   {color:#8000080; background-color:transparent; text-decoration:none}

and so on, which I intended to work in conjunction with specific links such as:

<a class="bluelink" href="http://www.bbc.co.uk/cult/sherlock/coules.shtml" target="_blank">BBC Cult interview</a>

However, this doesn't produce any effect: the link remains in the overall-set colours. Am I overlooking something obvious, or do I simply have the wrong approach? Many thanks in advance.

Edited November 18, 2014 by Bert Coules

[dsonesuk]

There is no reason from what i can see, that this should not work, if you placed new class link below the default link styling you have set up, also did you clear the history/cache els it still might be reference the original styling only.

[Bert Coules]

Yes, the new class links are directly below the overall settings in the CSS file.

 

Many thanks for the suggestion about clearing the cache. I just tried it (I'm using Firefox) but unfortunately it's made no difference. The same thing is happening in Chrome.

 

I was going to mention this in another thread, but perhaps it's relevant here: I've just discovered that <p> </p> tags are also not working: text just runs on with no line breaks. Something odd seems to be going on somewhere.

 

As I said I'm working offline, using Notepad++ as an editor and EasyPHP as a viewer. But that shouldn't be making any difference, should it?

Edited November 18, 2014 by Bert Coules

[Bert Coules]

This isn't really progress, but I suddenly twigged that the code I was using for a.bluelink:link wasn't valid, largely because it consisted of seven digits and letters rather than six. Heaven only knows where I got it from or why I didn't notice sooner.

 

Unfortunately, changing it to a recognised six letter code (actually, #0000FF) has done nothing to fix the problem.

 

Edited to add:

 

Solved it! After I corrected the codes I tried things out with one particular page - which turned out to be generated by the only page file where I'd forgotten to add "class="bluelink" into the relevant links. Now the colours are working fine throughout the site. Many thanks to dsonesuk for reassuring me that the basic approach was the right one.

 

Those <p></p> tags are still misbehaving though. I'd keep investigating.

Edited November 18, 2014 by Bert Coules

[dsonesuk]

have to placed them in correct order

:link

:visited

:hover

:active

 

to remember LoVe HAte

[Bert Coules]

That's clever and handy, thanks.

 

I'm still feeling my way with all this stuff to a certain extent. I'll probably be asking some more fairly basic and/or naive questions soon and trying people's patience. But I'm grateful for the help and advice.

Edited November 18, 2014 by Bert Coules