The following 45 lines of XSL code transforms a simple XML document into XHTML DIV tags that mirror the input structure:

    <xsl:stylesheet version="1.0"
      xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <xsl:output
      indent="no"
      method="html"
      doctype-system="about:legacy-compat"
      encoding="utf-8"/>

    <!-- Action parser that responds to HTTP requests. -->
    <xsl:param name="action" select="'do.dhtml'"/>

    <xsl:template match="/">
    <html>
      <head>
        <meta charset='utf-8'/>
        <title>Title</title>

        <link rel='stylesheet' type='text/css' href='css/common.css'/>
      </head>
      <body>
        <xsl:apply-templates/>
        <script type='text/javascript' src='js/common.js'></script>
      </body>
    </html>
    </xsl:template>

    <!-- Make the document complete with div elements and classes. -->
    <xsl:template match="*">
      <div class="{local-name()}"><xsl:apply-templates select="node()|@*"/></div>
    </xsl:template>

    <!-- The 'id' attribute indicates a link. -->
    <xsl:template match="*[@id]">
      <div class="{local-name()}"><a
        href="{$action}?action={local-name()}&amp;id={@id}"><xsl:apply-templates
          select="node()|*"/></a></div>
    </xsl:template>

    <!-- Retain the attributes (except if named "class"). -->
    <xsl:template match="@*">
      <xsl:if test="name() != 'class'"><xsl:copy-of select="."/></xsl:if>
    </xsl:template>

    </xsl:stylesheet>

CSS is then used to customize the presentation layer. For example, all the pages in the following website (click only "Next" and Safari is broken) are completely client-side XSLT, but use an XML document as a starting point:

http://djarvis.bitbucket.org/xml/

The pie chart on the following page was also generated using client-side XSLT:

http://djarvis.bitbucket.org/xml/resources.xml

The only "trick" that was required was to load CSS (and some JavaScript) based on the current filename in the URL:

http://djarvis.bitbucket.org/xml/js/common.js

Most people write one XSLT page per web page to transform, but by using structured DIVs with classes that correspond to the XML element names, only one general-purpose XSL page is required.

This demonstrates the separation of content (XML) from presentation (XHTML/CSS).