Xport Usage: Stylesheet Generation

There are many advantages to using stylesheets to control the appearance of your documents. A full discussion of stylesheets is not available on this site, but there are many good sites and books which discuss the features and usage of stylesheets.

Stylesheet generation is a breeze with Xport. Xport is capable os generation external stylesheets, embedded stylesheets, and inline styles. Xport is also capable of generating @import rules.

The basic instructions to generate stylesheets is illustrated below. For more robust examples, please examine the stylesheet generation in the source code in any of the examples presented on this site.

Below, is the revised code snippet we illustrated in xhtml generation, and the document it created.

View code snippet

View document source

View document results

We will now format the document's content with stylesheets. Creating a stylesheet object is simple in Xport, as shown below.

// create a stylesheet object
stylesheet ss;

After the stylesheet object is created, it can be populated with stylesheet rules, (and stylesheet comments, if desired). The addition of a CSS rule is shown below. A stylesheet_rule object accepts a single mandatory argument in it's constuctor, which is a string that specifies the selector. Once a rule object is created, it can be populated with one or more declarations. A declaration is added to the rule object via the rule object's add_declaration() operation. A rule is added to the stylesheet object via the style object's add_item() operation.

Xport's basic stylesheet features are illustrated in the code snippet below. The previous text has been greyed to higlight the new code which creates the stylesheet. The resulting document and document source can also be viewed.

View revised code snippet

View revised document source

View external stylesheet

View revised document results

Notice in the revised code snippet, that a stylesheet object is now being created and written. The code which creates the document object hasn't changed except for the code which creates the li elements. Let's examine the changes to the li elements a little closer. When creating the first li element, we're supplying a second argument to the element constructor. The first argument is the normal tag enumeration which specifies the tag to create. The second argument to the element constructor specifies the xhtml element's id. id's come in very handy when using stylesheets, since we can use an element id as the selector in a rule, which is being done a few lines further down in the snippet.

The element constructor can also accept a third argument, as shown in the creation of the second and third li elements. The third argument supplied to the elements constructor specifies the element's class name. The class names of elements are also very handy when using sytlesheets, as a class name can also be used to specify a stylesheet rule, which is also done further down in the code snippet, when a rule is created for .red.

Now, lets examine the code which creates and populates the stylesheet object. The stylesheet object, ss is first created. The stylesheet's constructor accepts no arguments. Next, a stylesheet_rule object is created, called rule. The stylesheet_rule accepts one mandatory argument, the name of the rule's selector. For the first rule, we're simply using a type selector, for the h1 element. For this rule, we add declarations for color and text-align. Notice that the css enumeration for text-align is text_align. The standard practice in Xport, is to replace dashes with underscores for attribute and css enumerators. Notice that the stylesheet_rule object is added to the spreadsheet object with stylesheet's add_item() operation.

Lets examine stylesheet_rule's add_declaration() operation more closely. This operation accepts two mandatory arguments. The first argument specifies the declarations property. The second argument specifies the declaration's value. For more information of these terms, refer to the readily available documentation on CSS. Notice that when creating the declaration for color, that the color enumerator was qualified with css. This is needed to resolve the color enumerator, because an enumerator of the same name exists for the attributes.

Notice that a new stylesheet_rule object doesn't need to be created for the second rule. Creating a new stylesheet_rule object for each rule would be impractical and inefficient. After a rule object has been added to a stylesheet object, the rule can be reset to a new rule by supplying a new selector in the stylesheet_rule's reset() operation. This is done in the code snippet for all the rules after the first rule.

The second rule created uses another type selector for the p element. Notice that the two css enumerators width and border are qualified with the css namespace, to differentiate them from their attribute enumerator counterparts.

The third rule defined also uses a type selector for the ul element. The forth rule uses an id selector for the id li1. This rule will be applied to the element with an id of li1, which is the first list item. As mentioned earlier, the id for an element is specified in the second optional argument of the element's constructor.

The last rule defined uses a class selector, for the class red. This rule will be applied to all elements with the class name of red. As mentioned earlier, the class name of an element is specified in the third optional argument of the element's constructor.

After the stylesheet object has been populated, we then add a link element to the document object, to specify an external stylesheet for the document. We then save the stylesheet object to a file, specifying the same filename that we did for the link element in the document.