XSL Introduction

XML stores data but gives no instructions on how to display it. A browser showing a raw XML file displays an expandable tree — not a formatted web page. XSL solves this. XSL stands for Extensible Stylesheet Language, and it is a family of languages designed to transform and format XML documents.

Think of XML as a raw database of facts and XSL as the design team that turns those facts into a polished report, a web page, or a PDF — all from the same source data.

The XSL Family

XSL is not one language — it is three related languages that work together:

1. XSLT — XSL Transformations

XSLT transforms an XML document into a different format. The output can be HTML, another XML structure, plain text, CSV, or any text-based format. XSLT does the heavy lifting in the XSL family.

2. XPath — XML Path Language

XPath is the query language that XSLT uses to navigate an XML document and select specific elements or attributes. XSLT cannot function without XPath. XPath works like a file path — it describes a route through the XML tree to reach specific data.

3. XSL-FO — XSL Formatting Objects

XSL-FO formats XML for print and PDF output. It controls page size, margins, fonts, columns, and pagination. XSL-FO is specialized for printable documents.

XSL Family Diagram

XSL (Extensible Stylesheet Language)
  |
  +-- XSLT (XSL Transformations)
  |       Transforms XML to HTML, text, or another XML
  |       Uses XPath to navigate and select data
  |
  +-- XPath (XML Path Language)
  |       Navigation and selection language
  |       Used by XSLT and XQuery
  |
  +-- XSL-FO (XSL Formatting Objects)
          Formats XML for print and PDF output
          Controls layout, fonts, page size

How XSLT Works

An XSLT processor takes two inputs — an XML data file and an XSLT stylesheet — and produces one output.

INPUT 1: XML Data File
  <catalog>
    <book><title>XML Guide</title><price>299</price></book>
  </catalog>

         +
         |
         v

INPUT 2: XSLT Stylesheet
  <xsl:template match="/">
    <html><body>...display book data...</body></html>
  </xsl:template>

         |
         v

XSLT PROCESSOR (browser, Java, Python, etc.)

         |
         v

OUTPUT: HTML Page
  <html>
    <body>
      <h1>XML Guide</h1>
      <p>Price: 299</p>
    </body>
  </html>

Where Is XSLT Processing Done?

Client-Side (Browser)

The XML file links to an XSLT stylesheet using a processing instruction. The browser downloads both files and transforms the XML into HTML locally.

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

Server-Side

The server runs an XSLT processor (in Java, Python, .NET, or PHP), transforms the XML, and sends the resulting HTML to the browser. The user never sees the XML. This is the most common approach in production systems.

A Simple XSLT Example

XML Data: books.xml

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="books.xsl"?>
<bookstore>
  <book>
    <title>Learning XML</title>
    <author>Meera Joshi</author>
    <price>350</price>
  </book>
  <book>
    <title>XSL Mastery</title>
    <author>Kiran Shah</author>
    <price>420</price>
  </book>
</bookstore>

XSLT Stylesheet: books.xsl

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <xsl:template match="/">
    <html>
      <body>
        <h2>Book Catalog</h2>
        <table border="1">
          <tr>
            <th>Title</th>
            <th>Author</th>
            <th>Price</th>
          </tr>
          <xsl:for-each select="bookstore/book">
            <tr>
              <td><xsl:value-of select="title"/></td>
              <td><xsl:value-of select="author"/></td>
              <td><xsl:value-of select="price"/></td>
            </tr>
          </xsl:for-each>
        </table>
      </body>
    </html>
  </xsl:template>

</xsl:stylesheet>

Output in Browser

Book Catalog
+------------------+-----------+-------+
| Title            | Author    | Price |
+------------------+-----------+-------+
| Learning XML     | Meera Joshi | 350  |
| XSL Mastery      | Kiran Shah  | 420  |
+------------------+-----------+-------+

Why Use XSLT Instead of Just Writing HTML?

XSL vs CSS for XML

Both CSS and XSL can style XML files, but they do very different things.

Key Points to Remember

• XSL is a family of three languages: XSLT, XPath, and XSL-FO.
• XSLT transforms XML into HTML, text, or other XML structures.
• XPath navigates the XML tree and selects data for XSLT to use.
• XSL-FO formats XML for print and PDF output.
• An XSLT processor takes an XML file and an XSL stylesheet and produces output.
• XSLT processing happens in the browser (client-side) or on a server (server-side).
• XSLT is more powerful than CSS for XML — it can restructure data, sort it, and filter it.