Useful XML and XSLT Tutorial with Example Stylesheet

When you purchase through links on our site, we may earn a commission. Here’s how it works.

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
<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 Translation. 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
<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>

Tagged With:

The information provided through this website should not be used to diagnose or treat a health problem or disease; it is not intended to offer any legal opinion or advice or a substitute for professional safety advice or professional care. Please consult your health care provider, attorney, or product manual for professional advice. Products and services reviewed are provided by third parties; we are not responsible in any way for them, nor do we guarantee their functionality, utility, safety, or reliability. Our content is for educational purposes only.

Subscribe
Notify of
2 Comments
Newest
Oldest Most voted
Inline Feedbacks
View all comments