Question

I want to do a dynamic word cloud and I was wondering if there is a way of changing the link colour in my html section, normally you just define the links colours in css something like:

.tag_cloud { padding: 3px; text-decoration: none; }
.tag_cloud:link  { color: #0c3569; }
.tag_cloud:visited { color: #0c3569; }
.tag_cloud:hover { color: #ffffff; background: #0c3569; }
.tag_cloud:active { color: #ffffff; background: #0c3569; }

But I’m planning to do a word cloud were every word has a different colour, aka link/visited will colour will be defined dinamicaly, but is there a way of defining link/visited/hover/active inline in the html?

I Imagine it could be something like this

<a href="something" style="font:arial; ???"word</a>

Thanks.

Answer 1

It can’t be done inline since :hover etc. are css pseudo selectors and won’t work inline since that is not the intention of it.

But don’t be afraid of using css classes – you will need some javascript anyway to make this work. Just define the classes you want to use like:

.cloud_item_1:link {color:red;}
.cloud_item_1:visited {color:yellow;}
.cloud_item_1:hover {text-decoration:underline;}
.cloud_item_1:active {color:black;}
.cloud_item_2:link {color:blue;}
.cloud_item_2:visited {color:orange;}
...

And than apply them to your html as you wish. No big deal here.