Useful XML and XSLT Tutorial with Example Stylesheet

To sustain this free service, we receive affiliate commissions via some of our links. This doesn’t affect rankings. Our review process.

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>

About The Author:

Alex has been involved on the business side of the internet since the early 2000's. He holds both a Management Science degree from the University of California at San Diego as well as a Computer Science degree from NJIT.

We Rock Your Web had its roots back in 2004 as the tech blog for a web design and development company Alex founded that has grown and evolved into the parent company of We Rock Your Web.

While his foundation is rooted in web development, his expertise today lies in content and digital marketing, SEO, organic and paid search, analytics, and publishing. Alex is an avid tennis player, nature enthusiast, and hiker, and enjoys spending time with his wife, friends, and dogs.

Disclaimer: This website contains reviews, opinions and information regarding products and services manufactured or provided by third parties. We are not responsible in any way for such products and services, and nothing contained here should be construed as a guarantee of the functionality, utility, safety or reliability of any product or services reviewed or discussed. Please follow the directions provided by the manufacturer or service provider when using any product or service reviewed or discussed on this website.

Subscribe
Notify of
2 Comments
Newest
Oldest Most voted
Brian B
December 29, 2006 6:00 am

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:


Thanks,
Brian B

We Rock Your Web
July 16, 2009 7:23 pm

Actually that’s exactly what we’re doing. You’ll notice the line:

in the catalog.xml file. That references the stylesheet catalog.xsl, which styles the catalog.xml document.