![]()
STYLE SHEETS
Now that we have touched on XML syntax, let's examine how we can display XML documents on the web.
Because we have the opportunity to create any tags that we want: there is no way for a browser to generically display our XML code. Instead we must use a style sheet that t
ells the browser how to display elements we have created. The two most common style sheet languages used with XML are Cascading Style Sheets (CSS) and the Extensible Style Language (XSL). We will discuss each of these in turn.
![]()
CASCADING STYLE SHEETS (CSS)
Cascading style sheets were originally designed for HTML. They allow authors to define font properties and other properties that can be applied to specific elements. Wit
h HTML, CSS rules allow you to change predefined tags such as <H1> and to override the defaults. It is just as easy to use CSS with XML, instead of predefined tags you format tags that you created.
Let's go back to our Hello World! example. Remember that we defined a MESSAGE element in that document. We h
ave to tell the browser what to do with the content of this element. Therefore we need to make a style sheet. The style sheet needs to contain specifications for each user-defined tag (in this case only one). Our style sheet for this example, then, consis
ts of only one line (rule) as shown below:
MESSAGE { display: block; font-size: 24 pt; font-weight: bold; color: FF0000 }
The first word of the rule is the name of the element we are formatting--it is called the selector. Within the brackets, there is a series of properties to apply to the element.
The display: block property tells the browser to display the text as a block separated from anything else that might be in the document. The message will be displayed in bold, 24 pt fon
t . We have chosen to display the message in red (FF0000). This rule is saved in a file with a .css extension. Then we just need to add one line to the .xml file to tell the browser where to find the style sheet that is to be used in conjuction with the X
ML code.
Click here to see the final appearance of our XML code (only works on IE 5.0).
Obviously, styles are generally much more complicated than our Hello World! example. As style sheets became more commonplace, there was an initiative to develop a style sheet stan
dard specifically for XML (remember CSS was originally used with HTML). The result of the initiative is called the Extensible Style Language.
![]()
EXTENSIBLE STYLE LANGUAGE (XSL)
XSL is much more advanced than CSS. CSS can only change the format of a specific element and any format applied to an element must be applied to all occurrences of that elemen
t. XSL has the ability to rearrange and reorder elements. XSL stylesheets can choose the style to use based on the content and attributes of the tag rather than just on the tag itself. While CSS has been better supported to date, XSL is much more powerful
and flexible.
XSL contains over 200 distinct formatting properties. Many of these same properties exists in CSS.
Among the many things XSL handles are: footnotes, margin notes, and page numbers. CSS does not support any of these. One disadvantage of XSL is that it is more complicated to use
. For a novice web programmer, CSS may be more straightforward.
Here is an example of XSL style sheets in use taken from the XML Bible by Elliot
te Rusty Harold
Here is another example of XSL style sheets.