An example of using styles with HTML

This section presents an example of using styles with HTML tags. You'll create a style sheet that styles some built-in tags and defines some style classes. You'll then apply that style sheet to a TextField object that contains HTML-formatted text.

In your preferred text editor, create a file.

Add the following style sheet definition to the file:

p {
  color: #000000;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 12px;
  display: inline;
}

a:link {
  color: #FF0000;
}

a:hover{
  text-decoration: underline;
}

.headline {
  color: #000000;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 18px;
  font-weight: bold;
  display: block;
}

.byline {
  color: #666600;
  font-style: italic;
  font-weight: bold;
  display: inline;
}

This style sheet defines styles for two built-in HTML tags (<p> and <a>) that will be applied to all instances of those tags. It also defines two style classes (.headline and .byline) that will be applied to specific paragraphs and text spans.

Save the file as html_styles.css.
In Flash, create a FLA file.
Using the Text tool, create a text field approximately 400 pixels wide and 300 pixels high.
Open the Property inspector (Window > Properties) and select the text field.
In the Property inspector, select Dynamic Text from the Text Type menu, select Multiline from the Line Type menu, select the Render Text as HTML option, and type news_txt in the Instance Name text box.
Select the first frame in Layer 1 in the Timeline (Window > Timeline).

Open the Actions panel (Window > Development Panels > Actions) and add the following code to the Actions panel:

// Create a new style sheet object
var style_sheet = new TextField.StyleSheet();
// Location of CSS file that defines styles
var css_url = "html_styles.css";
// Create some HTML text to display
var storyText:String = "<p class='headline'>Flash Player now supports Cascading Style Sheets!</p><p><span class='byline'>San Francisco, CA</span>--Macromedia Inc. announced today a new version of Flash Player that supports Cascading Style Sheet (CSS) text styles. For more information, visit the <a href='http://www.macromedia.com'>Macromedia Flash web site.</a></p>";
// Load CSS file and define onLoad handler:
style_sheet.load(css_url);
style_sheet.onLoad = function(ok) {
  if (ok) {
    // If the style sheet loaded without error, 
    // then assign it to the text object, 
    // and assign the HTML text to the text field.
    news_txt.styleSheet = style_sheet;
    news_txt.text = storyText;
  }
};

Note: For simplicity, the HTML text being styled is "hard-coded" into the script; in a real-world application you'll probably want to load the text from an external file. For information on loading external data, see Working with External Data.

Save the file as news_html.fla to the same directory that contains the CSS file you created previously.
Run the movie (Control > Test Movie) to see the styles applied to the HTML text automatically.

An example of using styles with HTML

To format HTML with a style sheet, do the following: