XSL (Extensible Style sheet Language) is a W3C standard which restructures and styles XML data by referencing an XSL style sheet (.xsl). XML is good for structuring, containing, and transporting data, but sometimes the data needs to reorganized and styled for different outputs (EG: online, print, handheld devices) or different user preferences. Historically XSLT evolved from XSL, XQL (XML Query Language), and XSL Patterns.

XSL is composed of three parts.

  1. XPath. XPath is a query expression language used by XSLT and XSL-FO for defining and accessing different parts of an XML document.
  2. XSLT (XSL for Transformations). XSLT is a rule-base programming language which takes an XML document (the source tree) and transforms the data into a new document (the result tree).
  3. XSL-FO (XSL Formatting Objects). XSL-FO is for presentation, formatting, i.e. generating output specific material such as PDF output. The 2001 W3C Recommendation for XML-FO is actually called 'XSL', which is pretty silly. XSL-FO is not used as much as XSLT  because much presentation is already handled by CSS, HTML, and XSLT.

There are two basic ways to connect an XSL stylesheet with the data in an XML document.

  1. Use a proprietary API. Call the transformNode or transformNodeToObject method of MSXML. The former returns a string, while the latter returns a DOM object. EG: Use MSXML.
  2. Embed the XSL in an XML document. Simply add a processing instruction (EG: <?xml-stylesheet type="text/xsl" href="egAlphabet.xsl"?>) to the XML document with the data. See EG: Embed the XSL .

Once XML is connected to an XSL style sheet, the resulting output can be in formats such as XML, XHTML, text, and PDF. An XML processor (EG: A browser) takes the results and presents it to a user.

EG: Use MSXML

Have a base HTML document connect to two XML documents. This example does a transform on the client side in Internet Explorer. It would be more reliable to do this sort of transform on the server side.

Here is the base HTML document (egAlphabet.htm).

<html>
<head>
<title>EG Alphabet HTML Document</title>
<style>body { color: #0000FF;}</style>
<script type="text/javascript" language="JavaScript">
function CallMe(){
	//This loads a data XML document.
	var docData = new ActiveXObject("Msxml2.DOMDocument.4.0");
	docData.async = false;
	docData.load("egAlphabet.xml");

 //This loads a stylesheet XML document.
	var docTransform = new ActiveXObject("Msxml2.DOMDocument.4.0");
	docTransform.async = false;
	docTransform.load("egAlphabet.xsl");

 //This transforms the data with the stylesheet, then plops the results in the HTML.
	divDisplay.innerHTML = docData.transformNode(docTransform);

 /* Note that in the HTML, the old ProgID of "Microsoft.XMLDOM" may return ambiguous results so it is preferable to use a version specific Program ID such as "Msxml2.DOMDocument.4.0". */
}
</script>
</head>
<body onload="CallMe()">
<!-- This will hold the data-filled HTML. -->
<div id="divDisplay"></div> 
</body>
</html>

Here is the data source XML (egAlphabet.xml) referenced in egAphabet.htm.

<?xml version="1.0"?>
<tblAlphabet>
  <recLetter>
    <heading>A</heading>
    <detail>The first letter of the alphabet.</detail>
    <fileName>A.gif</fileName>
  </recLetter>
  <recLetter>
    <heading>B</heading>
    <detail>The second letter of the alphabet.</detail>
    <fileName>B.gif</fileName>
  </recLetter>
</tblAlphabet>

Here is the XSL style sheet (egAlphabet.xsl) referenced in egAphabet.htm.

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <!-- This match is set for all the child nodes in the data. /-->
  <xsl:template match="/">
    <!-- This encloses items that will be repeated once for each specified child (recLetter) of a specified node (tblAlphabet) in the data. /-->     <xsl:for-each select="tblAlphabet/recLetter">
      <p><b>
        <!-- This gets the value of a specified child (Heading) of the for-each node (recLetter). /-->
        <xsl:value-of select="heading"/>
      </b></p>
      <p><xsl:value-of select="detail"/></p>
      <p><img>
        <!-- This sets the value of a specified attribute (src) of its parent node (img) in the template. /-->
        <xsl:attribute name="src">
          media/<xsl:value-of select="fileName"/>
        </xsl:attribute>
      </img></p>
      <hr/>
    </xsl:for-each>
  </xsl:template>
</xsl:stylesheet>

EG: Embed the XSL

Here is a direct connection between the data XML document and the style sheet XML document (egAlphabet2.xml). In a browser, egAlphbet2.xml should look very similar to egAlphabet.htm except for the absence of the CSS styling found in egAlphabet.htm. The same HTML and CSS code could have been created in the XSL style sheet.

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="egAlphabet.xsl"?>
...

Alternatively an XML document can be crudely formatted by skipping HTML and XSL altogether and embedding a CSS document into the XML as if it were an XSL stylesheet. This example is borrowed directly from MS (FakeXSLUser.xml).

<?xml version='1.0'?>
<?xml-stylesheet type="text/css" href="FakeXSL.css"?>
<book-review>
	<book>
		<headline><title>A Good Book</title></headline>
		<headline><author>Robert Brown</author></headline>
		<headline><publisher>The Publisher</publisher></headline>
		<headline><date>Feb. 16, 2000</date></headline>
	</book>
	<review>
		<title>A Good Book</title>
		by <author>Rober Brown</author>,
		published by <publisher>The Publisher</publisher>
		on <date>Feb. 16, 2000</date>
		is indeed a very good book.
	</review>
</book-review>

Here is the embedded Cascading Style Sheet (FakeXSL.css)

title {display:inline; color:red}
author {display:inline; font-style:italic}
publisher {display:inline; color:olive}
date {display:inline; color:blue}
review {display:block; font-size:12}
book {display:block; font-size:16; font-weight:bold}
headline {display:block; margin:1em}

Page Modified: (Hand noted: ) (Auto noted: )