How to Load An External CSS File

In this tutorial, you're going to learn how to load an external stylesheet and apply
it to a textfield. Let's get started.



Create Textfield

Open up flash and rename the default layer to text.
Place textfield on the text layer. Give it an instance name of my_textfield and make sure to set the behavior to multiline.



Create CSS File

You can use styles like in traditional html. Flash supports a subset of CSS properties. Please
go here to view a full list of supported properties.

To create our CSS file, use a text editor and paste the following code into it:

.quotation { 
font-size: 20px;
color:#0000FF; 
text-align:center; 
}

p { 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 12px;
text-align:justify;
color:#999999; 
margin-right:20px;
}

.author { 
font-family:Geneva, Arial, Helvetica, sans-serif; 
text-align:right;
font-style: italic;
}

Save the file and name it style.css.

Load CSS Files

Create a new layer and name it code. Place the following code in the layer:

var cssLoader:URLLoader = new URLLoader();
var cssRequest:URLRequest = new URLRequest("style.css");
var css:StyleSheet = new StyleSheet();

cssLoader.load(cssRequest);
cssLoader.addEventListener(Event.COMPLETE, cssLoadComplete);

function cssLoadComplete(e:Event):void {
 css.parseCSS(e.target.data);
 my_textfield.styleSheet = css;
 my_textfield.htmlText = "
Imagination is more important than knowledge.
";
 my_textfield.htmlText += "
For knowledge is limited to all we now know and understand, while imagination embraces the entire world, and all there ever will be to know and understand.
";
 my_textfield.htmlText += "
Albert Einstein
"; 
}

Save your work and test the movie.

Download Source