Aug 22 2006

XML and XSLT Tutorial


Categories:

What is XML?

XML stands for eXtensible Markup Language. XML is a meta language based entirely on user-specified semantics. It is therefore possible to create a page structure with user-defined tags and a DTD or XML Schema to describe the data. In other words, the XML describes itself. XML was designed to store, carry, and exchange data; not to display data.

Example of XML document (catalog.xml)

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="catalog.xsl"?>
<catalog>
<cd>
<title>Atlantis</title>
<artist>DJ Aquarius</artist>
<country>USA</country>
<company>Independent</company>
<price>9.95</price>
<year>2001</year>
</cd>
<cd>
<title>Dance Anthems : Spring 2004 </title>
<artist>Ministry of Sound</artist>
<country>UK</country>
<company>Inspired</company>
<price>14.95</price>
<year>2004</year>
</cd>
<cd>
<title>A Lively Mind</title>
<artist>Paul Oakenfold</artist>
<country>USA</country>
<company>Maverick</company>
<price>13.99</price>
<year>2006</year>
</cd>
</catalog>

These tags are made up by the user to reflect the data, as opposed to HTML tags, which are structured to define language interpretation and do not change. Browsers come preconfigured with instructions specifying how to translate HTML tags. XML, on the other hand, is transformed into XHTML, or more XML, via an XSLT stylesheet. All the instructions for transformation are therefore contained in the XSLT stylesheet.

What is XSLT?

XSLT stands for eXtensible Stylesheet Language. It's a stylesheet used to translate XML in a similar way that CSS is used to define and extend HTML declarations.

Example of XSL stylesheet (catalog.xsl)

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method='html' version='1.0' encoding='UTF-8' indent='yes'/>
<xsl:template match="/">
<html>
<style type="text/css">
table, td { border: 1px solid #000; background-color: white }
tr { background-color: silver }
td { padding: 0.5em }
</style>
<body>
<h2>My CD Collection</h2>
<table>
<tr>
<th>Title</th>
<th>Artist</th>
</tr>
<xsl:for-each select="catalog/cd">
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="artist"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

Styling XSLT with CSS

The following CSS was inserted to style the xslt stylesheet above:

<style type="text/css">
table, td { border: 1px solid #000; background-color: white }
tr { background-color: silver }
td { padding: 0.5em }
</style>

What it Looks Like

» view the result

No votes yet
Select your preferred way to display the comments and click "Save settings" to activate your changes.

Styling XSL with external CSS?

Nice post. Is it possible to style XML output by applying an external stylesheet reference to the XSLT stylesheet in place of the inline styles you're using in the example? For example by adding this statement to the XSLT:

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

Thanks,
Brian B

  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • Textual smileys will be replaced with graphical ones.

More information about formatting options

Captcha
This question is used to make sure you are a human visitor and to prevent spam submissions.
Copy the characters (respecting upper/lower case) from the image.