Stack Exchange
apply external css to xml loaded into flash actionscript
I need to render styled xml into a flash game. 
Here is what I tried, but the css style is not working:
this is my stylesheet woorden.css:
.f {color:red;}

this is my xml woorden.xml:
<?xml version="1.0" encoding="utf-8"?>
<woorden>
    <spel>
        <goed>boordevol</goed>
        <fout>boordenvol</fout>
        <fbk><![CDATA[Het is dus ber<span class="f">e</span>goed, boordevol, reuzeleuk en apetrots, maar berenvel en reuzenlaars.]]></fbk>      
    </spel>     
</woorden>

and this is my actionscript so far:
package {
import flash.display.MovieClip;
import flash.display.SimpleButton;
import flash.events.Event;
import flash.xml.*;
import flash.text.*;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.ui.Mouse;

public class BO_tussen_n extends MovieClip {
    internal var woorden:XML;
    internal var spelAr:Array;
    internal var sheet:StyleSheet;
    internal var myLoader:URLLoader;

    public function BO_tussen_n () {
        //constructor
        var ld:myLd = new myLd();
        ld.x = 20;
        ld.y = 160;
        ld.name = "ld";
        addChild (ld);

        load_xml ();
    }
    internal function load_xml () {
        var myLoader:URLLoader  = new URLLoader();
        var itemNumber:uint = 0;

        myLoader.load (new URLRequest("woorden.xml"));
        myLoader.addEventListener (Event.COMPLETE, handleMyData);

        function handleMyData (event:Event):void {
            woorden = new XML(event.target.data);
            woorden.ignoreWhite = true;
            myLoader = null;
            load_css ();
        }

    }
    internal function load_css () {
        myLoader = new URLLoader();
        sheet = new StyleSheet();

        myLoader.load (new URLRequest("woorden.css"));
        myLoader.addEventListener(Event.COMPLETE, load_game);
    }

    internal function load_game (event:Event) {
        trace(myLoader.data);
        sheet.parseCSS(myLoader.data);
        removeChild (getChildByName("ld"));
        add_text ();
    }
    internal function add_text () {
        var myFont:Font = new myFt();
        var myFmt:TextFormat = new TextFormat();
        myFmt.font = myFont.fontName;
        myFmt.align = "center";
        myFmt.leading = 1.2;
        myFmt.size = 14;
        myFmt.bold = true;

        var myText:TextField = new TextField();
        myText.defaultTextFormat = myFmt;
        myText.x = 5;
        myText.y = 5;
        myText.width = 500;
        myText.height = 100;
        myText.autoSize = "left";
        myText.textColor = 0x000000;
        myText.multiline = true;
        myText.wordWrap = true;
        myText.styleSheet = sheet;
        myText.htmlText = woorden.spel[0].fbk;
        myText.name = "topTekst";

        addChild (myText);
    }
}

edit: for experiment I added a h1-style to my stylesheet and flash DOES render that correctly. So it might be to do with the span-tag or the class?

I solved the problem. In the stylesheet I replaced:
.f {color:red}
with
.f {color:#ff0000;}
And that works :)

What happens if you remove CDATA and only leave text and e ?

In the stylesheet I replaced: .f {color:red} with .f {color:#ff0000;} I haven't had problems with it since.
