Now we have each of our property-value pairs in an array called properties_arr . All that remains is to step through each of these and separate the property off from its value and then store these in the styles dictionary. Again, we can loop through the items of each properties_arr : 

Stylesheet.prototype.parseStylesheet = function (src) {
        // split the src up into an array
        // by splitting at every "}"
        var styles_arr = src.split ("}");
        // pop the last item, since it's always empty
        // loop through the array, isolating the style name
        // and its properties.
        for (var i = 0; i < styles_arr.length; i++) {
                // split up at the "{"
                var style_arr = styles_arr[i].split ("{");
                // the first item will be the style name,
                // trim any white space on the left and right
                // so we are left with just the style name
                var style = style_arr[0].trimWhite ();
                // set a new style by this name
                this.setStyle (style);
                // the second item will be the list of properties.
                // split the properties up at each ";"
                var properties_arr = style_arr[1].split (";");
                // pop the last item, since it will always be empty
                properties_arr.pop ();
                // loop through each property
                for (var j = 0; j < properties_arr.length; j++) {
                        // split each property-value pair into property and value
                } // end looping through properties
        } // end looping through the array
} // end parseStyles () method

Each property-value pair is in the form 'property: value', and that means that each property value can be split by the colon separating each property from its value. So again we can use the split () method to break the property-value pair into an array: 

Stylesheet.prototype.parseStylesheet = function (src) {
        // split the src up into an array
        // by splitting at every "}"
        var styles_arr = src.split ("}");
        // pop the last item, since it's always empty
        // loop through the array, isolating the style name
        // and its properties.
        for (var i = 0; i < styles_arr.length; i++) {
                // split up at the "{"
                var style_arr = styles_arr[i].split ("{");
                // the first item will be the style name,
                // trim any white space on the left and right
                // so we are left with just the style name
                var style = style_arr[0].trimWhite ();
                // set a new style by this name
                this.setStyle (style);
                // the second item will be the list of properties.
                // split the properties up at each ";"
                var properties_arr = style_arr[1].split (";");
                // pop the last item, since it will always be empty
                properties_arr.pop ();
                // loop through each property
                for (var j = 0; j < properties_arr.length; j++) {
                        // split each property-value pair at the ":"
                        var property_arr = properties_arr[j].split (":");
                } // end looping through properties
        } // end looping through the array
} // end parseStyles () method

The first item of the property_arr will be the name of the property, and the second item will be the value of the property (notice again that here the array has a singular name while the previous array had a plural name). We simply need to trim the white space from these values and we'll have our distinct property and values: 

Stylesheet.prototype.parseStylesheet = function (src) {
        // split the src up into an array
        // by splitting at every "}"
        var styles_arr = src.split ("}");
        // pop the last item, since it's always empty
        // loop through the array, isolating the style name
        // and its properties.
        for (var i = 0; i < styles_arr.length; i++) {
                // split up at the "{"
                var style_arr = styles_arr[i].split ("{");
                // the first item will be the style name,
                // trim any white space on the left and right
                // so we are left with just the style name
                var style = style_arr[0].trimWhite ();
                // set a new style by this name
                this.setStyle (style);
                // the second item will be the list of properties.
                // split the properties up at each ";"
                var properties_arr = style_arr[1].split (";");
                // pop the last item, since it will always be empty
                properties_arr.pop ();
                // loop through each property
                for (var j = 0; j < properties_arr.length; j++) {
                        // split each property-value pair at the ":"
                        var property_arr = properties_arr[j].split (":");
                        // the first item will be the property name,
                        // the second item will be the property value,
                        // so trim any white spaces
                        var property = property_arr[0].trimWhite ();
                        var value = property_arr[1].trimWhite ();
                } // end looping through properties
        } // end looping through the array
} // end parseStyles () method

Now that we have our property and its corresponding value, we can store it in the styles dictionary with our setProperty () : 

Stylesheet.prototype.parseStylesheet = function (src) {
        // split the src up into an array
        // by splitting at every "}"
        var styles_arr = src.split ("}");
        // pop the last item, since it's always empty
        // loop through the array, isolating the style name
        // and its properties.
        for (var i = 0; i < styles_arr.length; i++) {
                // split up at the "{"
                var style_arr = styles_arr[i].split ("{");
                // the first item will be the style name,
                // trim any white space on the left and right
                // so we are left with just the style name
                var style = style_arr[0].trimWhite ();
                // set a new style by this name
                this.setStyle (style);
                // the second item will be the list of properties.
                // split the properties up at each ";"
                var properties_arr = style_arr[1].split (";");
                // pop the last item, since it will always be empty
                properties_arr.pop ();
                // loop through each property
                for (var j = 0; j < properties_arr.length; j++) {
                        // split each property-value pair at the ":"
                        var property_arr = properties_arr[j].split (":");
                        // the first item will be the property name,
                        // the second item will be the property value,
                        // so trim any white spaces
                        var property = property_arr[0].trimWhite ();
                        var value = property_arr[1].trimWhite ();
                        // assign the property and value to the style
                        this.setProperty (style, property, value);
                } // end looping through properties
        } // end looping through the array
} // end parseStyles () method

And with that our parsing is done. This method steps through the whole text of the stylesheet, breaking it up into smaller and smaller pieces until it has all the properties and values assigned to style objects in the styles dictionary. Now these style properties are available for use to other Flash entities.

Now that the parsing is finished, we need to invoke the onLoad () method to tell the programmer that the parsing is complete. We'll pass a value of 'true' as a parameter to say that everything went okay: 

Stylesheet.prototype.parseStylesheet = function (src) {
        // split the src up into an array
        // by splitting at every "}"
        var styles_arr = src.split ("}");
        // pop the last item, since it's always empty
        styles_arr.pop ();
        // loop through the array, isolating the style name
        // and its properties.
        for (var i = 0; i < styles_arr.length; i++) {
                // split up at the "{"
                var style_arr = styles_arr[i].split ("{");
                // the first item will be the style name,
                // trim any white space on the left and right
                // so we are left with just the style name
                var style = style_arr[0].trimWhite ();
                // set a new style by this name
                this.setStyle (style);
                // the second item will be the list of properties.
                // split the properties up at each ";"
                var properties_arr = style_arr[1].split (";");
                // pop the last item, since it will always be empty
                properties_arr.pop ();
                // loop through each property
                for (var j = 0; j < properties_arr.length; j++) {
                        // split each property-value pair at the ":"
                        var property_arr = properties_arr[j].split (":");
                        // the first item will be the property name,
                        // the second item will be the property value,
                        // so trim any white spaces
                        var property = property_arr[0].trimWhite ();
                        var value = property_arr[1].trimWhite ();
                        // assign the property and value to the style
                        this.setProperty (style, property, value);
                } // end looping through properties
        } // end looping through the array
        // now that all the styles have been parsed into objects
        // stored in this.stylesDictionary, we can invoke the
        // onLoad () method with a value of 'true'.
        this.onLoad (true);
} // end parseStyles () method

Now the user can simply invoke the load (stylesheet) method (or let the init () method invoke it for them) and then just wait until the onLoad () method fires, just as they would with a LoadVars object or an XML object. And when the onLoad () method is invoked, the styles are available for use, all stored neatly as objects and properties in the styles dictionary. By using the getStyle () and getProperty () methods, the programmer can easily access any of the styles or properties. Using this Stylesheet class to load our styles is this easy: 

var myStylesheet = new Stylesheet ();

myStylesheet.onLoad = function (ok) {
        trace ("Stylesheet loaded and ready to go!");
} // end onLoad ()

myStylesheet.load ("myStyles.css");

We have now completed the core of our Stylesheet class. From this point you can extend it however you like. In a moment we'll look at a way to extend it to TextFields to make styling text with CSS as easy as A-B-C. Here's the class in full, with documentation: 

// ------------------------------------------------------------- //
// Some String Methods for stripping white space //
// ------------------------------------------------------------- //

String.prototype.trimL = function () {
        for (var i = 0; i < this.length; i++) {
                if (this.charCodeAt (i) > 32) {
                        return this.substr (i, this.length);
                } // end if (this.charCodeAt (i) > 32)
        } // end looping through characters
        return this;
} // end String.trimL ()

String.prototype.trimR = function () {
        for (var i = this.length; i > 0; i--) {
                if (this.charCodeAt (i) > 32) {
                        return this.substring (0, i + 1);
                } // end if (this.charCodeAt (i) > 32)
        } // end looping through characters backwards
        return this;
} // end String.trimR ()

String.prototype.trimWhite = function() {
        this = this.trimL ();
        return this.trimR ();
} // end String.trimWhiteThoth ()

// End String Methods //
// ------------------------------------------------------------- //




// ************************************************************* //
// ************************************************************* //
//
// Stylesheet class
//
// ************************************************************* //
//
// This class loads a CSS stylesheet, parses it, and stores
// the styles with all their corresponding property-value pairs
// as objects. The objects can then be retreived and easily
// applied to whatever you like.
//
// ************************************************************* //
// ************************************************************* //



// ------------------------------------------------------------- //
// Constructor
// ------------------------------------------------------------- //
//
// stylesheet: the name of the stylesheet to load
//
// ------------------------------------------------------------- //

_global.Stylesheet = function (stylesheet) {
        this.init.apply (this, arguments);
} // end constructor



// ------------------------------------------------------------- //
// inheritance
// ------------------------------------------------------------- //
//
// This class inherits from LoadVars. It inherits LoadVars'
// methods for loading text files. This makes it so the user
// can invoke the standard load () and onLoad () methods to load
// their stylesheets. However, this class overrides the default
// LoadVars parsing mechanism because we aren't parsing the
// standard LoadVars text files. Instead, we are parsing
// CSS stylesheets. So this class inherits the loading
// methods from LoadVars, but performs its own parsing.
//
// ------------------------------------------------------------- //

Stylesheet.prototype.__proto__ = LoadVars.prototype;



// ------------------------------------------------------------- //
// init
// ------------------------------------------------------------- //
//
// Initializes the object and loads the stylesheet.
//
// stylesheet: the name of the stylesheet to load.
//
// ------------------------------------------------------------- //

Stylesheet.prototype.init = function (stylesheet) {
        // create an object to hold all the styles
        this.stylesDictionary = new Object ();
        // if 'stylesheet' has been defined,
        // then save it as 'this.stylesheet'
        // and then load it. If it hasn't been
        // defined, do nothing and the user can
        // invoke the load (stylesheet) method themselves.
        if (stylesheet != undefined) {
                this.stylesheet = stylesheet;
                this.load (stylesheet);
        } // end if (stylesheet != undefined)
} // end init () method



// ------------------------------------------------------------- //
// setStyle
// ------------------------------------------------------------- //
//
// This method creates a new style object with the name 'style'.
//
// style: the name for the new style object.
//
// ------------------------------------------------------------- //

Stylesheet.prototype.setStyle = function (style) {
        this.stylesDictionary[style] = new Object ();
} // end setStyle () method



// ------------------------------------------------------------- //
// getStyle
// ------------------------------------------------------------- //
//
// This method retrieves a style object by the name 'style'
// from this.stylesDictionary.
//
// style: the name of the style object to retreive.
//
// ------------------------------------------------------------- //

Stylesheet.prototype.getStyle = function (style) {
        return this.stylesDictionary[style];
} // end getStyle () method



// ------------------------------------------------------------- //
// setProperty
// ------------------------------------------------------------- //
//
// This method sets the value of a property for a
// specified style.
//
// style: the name of the style whose property you wish to set.
// property: the name of the property to set.
// value: the value to which the property should be set.
//
// ------------------------------------------------------------- //

Stylesheet.prototype.setProperty = function (style, property, value) {
        this.stylesDictionary[style][property] = value;
} // end setProperty () method



// ------------------------------------------------------------- //
// getProperty
// ------------------------------------------------------------- //
//
// This method retreives the value of a property for a
// specified style.
//
// style: the name of the style whose property you want to retreive.
// property: the name of the property to retreive from the style.
//
// ------------------------------------------------------------- //

Stylesheet.prototype.getProperty = function (style, property) {
        return this.stylesDictionary[style][property];
} // end getProperty () method



// ------------------------------------------------------------- //
// onData
// ------------------------------------------------------------- //
//
// This method overrides the LoadVars.onData method. By doing so,
// we can stop the class from parsing the text file into
// LoadVars property-value pairs. Instead, we will parse the
// text file (the CSS stylesheet) on our own.
//
// src: the data received
//
// ------------------------------------------------------------- //

Stylesheet.prototype.onData = function (src) {
        // invoke the parseStylesheet () method
        this.parseStylesheet (src);
} // end onData () method



// ------------------------------------------------------------- //
// parseStylesheet
// ------------------------------------------------------------- //
//
// This method goes through the text file and parses the styles,
// making each style into an object in this.stylesDictionary,
// and making each property (and its value) a property of
// that style object. When all is said and done, the
// onLoad () method is invoked with a value of 'true'.
//
// src: the text of the loaded stylesheet
//
// ------------------------------------------------------------- //

Stylesheet.prototype.parseStylesheet = function (src) {
        // split the src up into an array
        // by splitting at every "}"
        var styles_arr = src.split ("}");
        // pop the last item, since it's always empty
        styles_arr.pop ();
        // loop through the array, isolating the style name
        // and its properties.
        for (var i = 0; i < styles_arr.length; i++) {
                // split up at the "{"
                var style_arr = styles_arr[i].split ("{");
                // the first item will be the style name,
                // trim any white space on the left and right
                // so we are left with just the style name
                var style = style_arr[0].trimWhite ();
                // set a new style by this name
                this.setStyle (style);
                // the second item will be the list of properties.
                // split the properties up at each ";"
                var properties_arr = style_arr[1].split (";");
                // pop the last item, since it will always be empty
                properties_arr.pop ();
                // loop through each property
                for (var j = 0; j < properties_arr.length; j++) {
                        // split each property-value pair at the ":"
                        var property_arr = properties_arr[j].split (":");
                        // the first item will be the property name,
                        // the second item will be the property value,
                        // so trim any white spaces
                        var property = property_arr[0].trimWhite ();
                        var value = property_arr[1].trimWhite ();
                        // assign the property and value to the style
                        this.setProperty (style, property, value);
                } // end looping through properties
        } // end looping through the array
        // now that all the styles have been parsed into objects
        // stored in this.stylesDictionary, we can invoke the
        // onLoad () method with a value of 'true'.
        this.onLoad (true);
} // end parseStyles () method

// end Stylesheet class //
// ************************************************************* //