Style htmlText with CSS in your Actionscript | Flash/CSS Tutorial


In flash you can have text areas that are rendered as html. You can also apply formatting styles to this html. This will show a simple example on how to apply css to html text in flash. I’ll do a simple anchor tag style to show you the ropes. We’ll style a link to be underlined and then when you hover or mouse over it, we’ll change the color. It’s a design style that is widely used online in html, but flash doesn’t natively do it. As a matter of fact, flash doesn’t even natively underline links.


  1. Import TextField.StyleSheet
  2. create a style sheet object: var myCSS:StyleSheet = new StyleSheet();
  3. Specify your styles: myCSS.setStyle(“a:link”, {color:’#0000CC’,textDecoration:’underline’});
  4. Ensure that the text box is html enabled: myHTML.htmlText = myHTMLText;
  5. Apply the style sheet object to your html text box: myHTML.styleSheet = myCSS;


Get Adobe Flash player


[cc lang=”actionscript”]
import TextField.StyleSheet;

myHTMLText = ”

HTML Text (sample header)

Here is some sample html text “+
“filling a text box this link to circlecube and example headers”+

Header h1

Header h2


//create and initialize css
var myCSS:StyleSheet = new StyleSheet();
myCSS.setStyle(“body”, {fontSize:’15’,color:’#000066′});
myCSS.setStyle(“h1”, {fontSize:’25’,color:’#000000′});
myCSS.setStyle(“h2”, {fontSize:’19’,color:’#000000′});
myCSS.setStyle(“a:link”, {color:’#0000CC’,textDecoration:’none’});
myCSS.setStyle(“a:hover”, {color:’#0000FF’,textDecoration:’underline’});
myCSS.setStyle(“b”, {fontWeight:’bold’});
myCSS.setStyle(“em”, {fontWeight:’bold’});

//ensure html support and apply css to it
myHTML.html = true;
myHTML.styleSheet = myCSS;
myHTML.htmlText = myHTMLText;
//resize the textbox to exact fit the text in it
//myHTML.autoSize = “left”;


open source

24 thoughts on “Style htmlText with CSS in your Actionscript | Flash/CSS Tutorial

  1. Thanks for the tutorial. I think you should mention that this tutorial is for AS2 somewhere though.

    1. @David – Correct, sorry I didn’t mention it. This is AS2 version, AS3 isn’t too different, I’ll have to put together an article for that. Thanks

    1. @Luigi – Yes, this is possible, I don’t remeber the syntax off the top of my head, but a well thought google search should do the trick, good luck!

  2. @Luigi – Yes, this is possible, I don't remeber the syntax off the top of my head, but a well thought google search should do the trick, good luck!

  3. dude, this is the best, simplest and most straight-forward tutorial I have come accross on the Web. Very well done and many thanks!

      1. And I also wish to store the html text in XML file, in that case I can maintain html text dynamically. Can I apply CSS to the html text which I get from XML file? Thanks a lot, Evan you are awesome guy and very helpful!

  4. muito bom mais uma pergunta

    como seria para retornar de uma xml com campo assim

    Apollo teste

    Portuguese to English translation:
    very good one more question

    would like to return from a well field with xml

    Apollo Test

  5. The hover functionality happens regardless of whether there is a display object in front of the text or not (the TextEvent.LINK doesn’t fire when you click the text at least so that good). I found this out when using the “hoverable” text beneath a modal window. Anyone know a trick to keep this from happening? I don’t want to have to change my styles on the fly depending on if there is a DisplayObject in front of my text or not.

  6. after close each tag,it is going next line

    could you Please tell me the solution?


Comments are closed.