Strange CSS Problem?

programming flash
1

I have a problem, setting the colour for the <a> element works fine but setting class or the colour for ANY other element eg <p> doesn’t seem to work.

Code below…

The Text:

makeText("content_col1", "Basic-11-Bold", 11, "<span class=\"styles.css\">Here is some text that should be pink</span>", 10, 10, 200, 500, 0, 0xffffff, 1, 1);
makeText("content_col2", "Basic-11-Bold", 11, "<a href=\"#\">This is really exciting!</a>", 210, 10, 200, 500, 0, 0xffffff, 1, 1);

The Function and style sheet load:

import TextField.StyleSheet;
var css:StyleSheet = new StyleSheet();
css.load("styles.css");
MovieClip.prototype.makeText = function(txtID, txtFont, txtSize, txtContent, xPos, yPos, w, h, bold, txtColor, fadeitin, txtAlias) {
    trace("makeText: "+txtID);
    var emptyclip = this.createEmptyMovieClip(txtID, this.getNextHighestDepth());
    emptyclip._alpha = 100;
    var txt = emptyclip.createTextField("textBox", this.getNextHighestDepth(), xPos, yPos, w, h);
    txt.multiline = true;
    txt.autoSize = true;
    txt.wordWrap = true;
    if (txtAlias == 1) {
        txt.embedFonts = true;
        txt.antiAliasType = "advanced";
    }
    txt.html = true;
    txt.htmlText = txtContent;
    format = new TextFormat();
    format.font = txtFont;
    format.size = txtSize;
    if (bold == 1) {
        format.bold = true;
    }
    format.color = txtColor;
    txt.setTextFormat(format);
    if (fadeitin == 1) {
        fadein(emptyclip);
    }
    txt.styleSheet = css;
};

The style sheet:

.pink {
color:#e30071;
}
a {
color:#e30071;
}
a:hover {
text-decoration:underline;
}
p {
color:#ffff00;
}

Result: