css not working at tag cloud

Question

I've used a jQuery tag cloud plugin: http://johannburkard.de/blog/programming/javascript/dynacloud-a-dynamic-javascript-tag-keyword-cloud-with-jquery.html

On it, I'm trying to make some tag highlighted by CSS. But, unfortunately no tag is effected by my written CSS. Some of my HTML code:

<div id="dynacloud">
    <div id="text" class="dynacloud">
        <a href="#Create"><span>Create</span></a>
        <a href="#Edit"><span>Edit</span></a>
        <a href="#Modify" class="highlight"><span>Modify</span></a>
        <a href="#Movie"><span class="highlight">Movie</span></a>
        <a href="#Song"><span>Song</span></a>
    </div>
</div>

Some CSS:

.highlight {
    color:#333 !important;
    font-weight:800 !important;
    font-size:1.9em !important;
}

I defined class name "highlight" at HTML code. But, after seeing by browser inspect element I saw that my defined "highlight" class on HTML code isn't existing anymore. I don't understand why it's happened. How can I make some of my tag highlighted?

My work: http://jsfiddle.net/learner73/LJcBB/

Answer 1

Dynacloud uses classes no ID

DEMO http://jsfiddle.net/LJcBB/2/

<div class="dynacloud">

CSS

.dynacloud{
    margin-bottom: 20px;
    margin-left: 16px;
    text-align: center;
    line-height: 30px;
    word-spacing: 5px;
}
.dynacloud a{
    color: #999999;
    font-size: 1.6em !important;    
    font-weight: 100;
    text-decoration: none;
}
.dynacloud a:hover{
    color:#333;
    text-decoration:underline;  
}
.highlight {
    color:#333 !important;
    font-weight:800 !important;
    font-size:1.9em !important;
}