Creating and Linking an External Stylesheet

In this tutorial we'll use CML to create a background graphic and style it using an external stylesheet.

Let's set up our application project for this tutorial. We'll use the default templates that get installed with GestureWorks3 and copy the tutorial's files into the template. The GestureWorks3 templates are located in the user's home directory, within the "GestureWorks3/Templates" folder. Let's make a copy of the GestureWorks3 template which corresponds to our IDE of choice (Flash CS5, Flash Builder, Flash Develop, etc). Rename the copy: "CSS_Tutorial".

Now let's download the "GW3_CSS_Tutorial1? folder and copy it's contents to our newly created "CSS_Tutorial" project folder overriding any files with the same name. Our project should be ready to go. Let's examine the contents.

Open the file "my_styles.css" found in the "library/cml/styles/" application sub-directory. We'll use this file to define the CSS styles for our layout page.

First, let's create a graphic element in CML. This will be the background for text that we'll create in the next tutorial. Open the my_application.cml file:

There are two important things to note. First, the GestureWorksApplication's css attribute correctly references the filename and path of our CSS file:

Second, the GraphicElement's id attribute contains the value: "background". We'll use this value to reference this particular element within the CSS.

Now that the display object has been created, we can create it's style definition. We'll create our first style definition inside of the my_styles.css file:

Note the style name "background" matches the TextElement's id exactly with the exception of the "#" symbol prefix. The "#" prefix indicates to the CSS selector engine that we are targeting an element's id attribute. This complies with CSS standards, so web developers should find this practice familiar.