XML Home

XML Tutorial
About XML
XML Viewers
XML Editors
XML Documents
XML Syntax
XML Elements
XML Attributes
XML with CSS
XML with XSL
XML Namespace
XML Local Namespace
XML Default Namespace
XML Entities
XML Creating Entities
XML CDATA

FREE Hosting!

With every domain name you register with ZappyHost, you get FREE hosting.

$1.99 Domain Names

With every new non-domain purchase thru ZappyHost, you get a domain name for only $1.99.

XML and XSL

In the previous lesson, we used CSS to apply styles to the contents of our XML document. Applying styles improved the look of our document when viewing it with a browser.

XML also has it's own styles language - XSL. XSL stands for Extensible Styles Language and is a very powerful language for applying styles to XML documents. XSL has two parts - a formatting language and a transformation language.

The formatting language allows you to apply styles similar to what CSS does. Browser support for the XSL formatting language is limited at this stage.

The transformation language is known as XSLT (XSL Transformations). XSLT allows you to transform your XML document into another form. For example, you could use XSLT to dynamically output some (or all) of the contents of your XML file into an HTML document containing other content.

XSLT Example

Using our previous XML example, imagine if we wanted to add a heading and some text to the top of the document when we output our XML document. Something like this:

The only problem is, the heading and the text isn't in the XML file. Well, this is where XSLT comes in. Using XSLT, all we need to do is create a style sheet that transforms the XML into HTML and adds the heading/text.

How to Do This?

Instead of linking to a CSS file, we will link to a XSL file.

Step 1: Create an XML file with the following content and save it.


<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<?xml-stylesheet type="text/xsl" href="tutorials.xsl"?>
<tutorials>
<tutorial>
<name>XML Tutorial</name>
<url>http://www.quackit.com/xml/tutorial</url>
</tutorial>
<tutorial>
<name>HTML Tutorial</name>
<url>http://www.quackit.com/html/tutorial</url>
</tutorial>
</tutorials>

Step 2: Create a file with the following content and save it as tutorials.xsl into the same directory as the XML file.


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

<xsl:template match="/">
<html>
<head>
<title>XML XSL Example</title>
<style type="text/css">
body
{
margin:10px;
background-color:#ccff00;
font-family:verdana,helvetica,sans-serif;
}

.tutorial-name
{
display:block;
font-weight:bold;
}

.tutorial-url
{
display:block;
color:#636363;
font-size:small;
font-style:italic;
}
</style>
</head>
<body>
<h2>Cool Tutorials</h2>
<p>Hey, check out these tutorials!</p>
  <xsl:apply-templates/>
</body>
</html>
</xsl:template>

<xsl:template match="tutorial">
  <span class="tutorial-name"><xsl:value-of select="name"/></span>
  <span class="tutorial-url"><xsl:value-of select="url"/></span>
</xsl:template>

</xsl:stylesheet>

I don't expect you to understand all this code just yet. I'll be explaining that later on - I've written a whole section on XSLT. But, it does give you an hint of what's to come in this tutorial. In the above XSL file, I'm using XSLT and XPath - both of which are explained later in this tutorial.

Enjoy this website?

Link to this page (copy/paste into your own website or blog):
<a href="http://www.quackit.com/xml/tutorial/xml_xsl.cfm">XML and XSL</a> from Quackit.com
Add this page to your favorite social bookmarks sites:
Add this page to your Favorites