CINXE.COM
XML and XSL
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="xml xsl, syntax, programming, how to, xml tutorial, extensible markup language, learn xml"> <meta name="Description" content="Learn how to style your XML documents using XSL with this free XML tutorial."> <link rel="canonical" href="https://www.quackit.com/xml/tutorial/xml_xsl.cfm"> <title>XML and XSL</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="shortcut icon" href="/pix/favicon96.png"> <link rel="apple-touch-icon" href="/pix/apple-touch-icon.png"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> <link href="/common/css/master.45.min.css" rel="stylesheet"> <script async src="https://cdn.fuseplatform.net/publift/tags/2/3499/fuse.js"></script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q3H025ZKLN"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Q3H025ZKLN'); </script> </head> <body> <header class="site-header"> <div class="site-header-base"> <div class="site-logo"> <a title="Quackit Homepage" target="_top" href="/"><img src="/pix/quackit_logo_watermark.png" width="87" height="33" alt="Quackit Logo"></a> </div> <button id="site-nav-toggler" class="site-nav-toggler" aria-expanded="false" aria-controls="site-nav"> <span class="sr-only">Toggle navigation</span> ☰ </button> </div> <nav id="site-nav" class="site-nav"> <div class="site-links"> <ul> <li><a href="/"><i class="fa fa-home"></i> <span class="sr-only">Home</span></a></li> <li><a href="/html/">HTML</a></li> <li><a href="/css/">CSS</a></li> <li><a href="/scripting/">Scripting</a></li> <li><a href="/database/">Database</a></li> </ul> </div> <div class="site-search-top"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:98x0fk-bbgi"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="20" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> </div> </nav> </header> <div class="main"> <article class="content"> <h1 class="page-title">XML and XSL</h1> <div class="ad ad-top"> <!-- GAM 71161633/QCKIT_quackit/article_header --> <div data-fuse="23059883623"></div> </div> <ul class="pager"> <li><a href="/xml/tutorial/xml_css.cfm"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> XML CSS</a></li> <li><a href="/xml/tutorial/xml_namespace.cfm">XML Namespace <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li> </ul> <p class="lead">XSL is a powerful language for applying styles to XML documents.</p> <p>In the previous lesson, we used CSS to apply styles to the contents of our <a href="/xml/tutorial/xml_documents.cfm">XML document</a>. Applying styles improved the look of our document when viewing it with a browser. </p> <div class="ad"> <!-- GAM 71161633/QCKIT_quackit/article_incontent_1 --> <div data-fuse="23059883629"></div> </div> <p>XML also has its own styles language - <dfn>XSL</dfn>. XSL stands for <dfn>Extensible Styles Language</dfn> and is a very powerful language for applying styles to XML documents. XSL has two parts — a formatting language and a transformation language.</p> <p>The formatting language allows you to apply styles similar to what <a href="/css/">CSS</a> does. Browser support for the XSL formatting language is limited at this stage.</p> <p>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.</p> <h2>XSLT Example</h2> <p>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:</p> <img src="/pix/xml/tutorial/xml_xsl_example_1.gif" class="screenshot" alt="XML XSL example" /> <p>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 <a href="/html/">HTML</a> and adds the heading/text.</p> <h2>How to Do This?</h2> <p>Instead of linking to a CSS file, we will link to a XSL file.</p> <ol class="steps"> <li> <p>Create an XML file with the following content and save it.</p> <script src="/common/js/codemirror/lib/codemirror.js"></script> <script src="/common/js/codemirror/mode/htmlmixed/htmlmixed.js"></script> <script src="/common/js/codemirror/mode/css/css.js"></script> <script src="/common/js/codemirror/mode/javascript/javascript.js"></script> <script src="/common/js/codemirror/mode/xml/xml.js"></script> <div class="code-only"> <textarea id="example1" autocomplete="off" spellcheck="false"><?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<?xml-stylesheet type="text/xsl" href="tutorials.xsl"?>
<tutorials>
<tutorial>
<name>XML Tutorial</name>
<url>https://www.quackit.com/xml/tutorial</url>
</tutorial>
<tutorial>
<name>HTML Tutorial</name>
<url>https://www.quackit.com/html/tutorial</url>
</tutorial>
</tutorials></textarea> </div> <script> var exampleCode1 = CodeMirror.fromTextArea(document.getElementById("example1"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> </li> <li> <p>Create a file with the following content and save it as <kbd>tutorials.xsl</kbd> into the same directory as the XML file.</p> <script src="/common/js/codemirror/mode/htmlmixed/htmlmixed.js"></script> <div class="code-only"> <textarea id="example2" autocomplete="off" spellcheck="false"><?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></textarea> </div> <script> var exampleCode2 = CodeMirror.fromTextArea(document.getElementById("example2"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> </li> </ol> <p>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.</p> <ul class="pager"> <li><a href="/xml/tutorial/xml_css.cfm"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> XML CSS</a></li> <li><a href="/xml/tutorial/xml_namespace.cfm">XML Namespace <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li> </ul> </article> <div class="sidebar"> <nav> <ul> <li> <h3><a href="/xml/tutorial/" title="">XML Tutorial</a></h3> <ul> <li><a href="/xml/tutorial/about_xml.cfm" title="">About XML</a></li> <li><a href="/xml/tutorial/xml_viewers.cfm" title="">XML Viewers</a></li> <li><a href="/xml/tutorial/xml_editors.cfm" title="">XML Editors</a></li> <li><a href="/xml/tutorial/xml_documents.cfm" title="">XML Documents</a></li> <li><a href="/xml/tutorial/xml_syntax.cfm" title="">XML Syntax</a></li> <li><a href="/xml/tutorial/xml_elements.cfm" title="">XML Elements</a></li> <li><a href="/xml/tutorial/xml_attributes.cfm" title="">XML Attributes</a></li> <li><a href="/xml/tutorial/xml_css.cfm" title="">XML with CSS</a></li> <li><a href="/xml/tutorial/xml_xsl.cfm" title="">XML with XSL</a></li> <li><a href="/xml/tutorial/xml_namespace.cfm" title="">XML Namespace</a></li> <li><a href="/xml/tutorial/xml_local_namespace.cfm" title="">XML Local Namespace</a></li> <li><a href="/xml/tutorial/xml_default_namespace.cfm" title="">XML Default Namespace</a></li> <li><a href="/xml/tutorial/xml_entities.cfm" title="">XML Entities</a></li> <li><a href="/xml/tutorial/xml_creating_entities.cfm" title="">XML Creating Entities</a></li> <li><a href="/xml/tutorial/xml_cdata.cfm" title="">XML CDATA</a></li> </ul> </li> <li> <h3 class="heading-only">DTD</h3> <ul> <li><a href="/xml/tutorial/dtd_introduction.cfm" title="">DTD Introduction</a></li> <li><a href="/xml/tutorial/dtd_doctype.cfm" title="">DTD DOCTYPE</a></li> <li><a href="/xml/tutorial/dtd_internal_dtd.cfm" title="">DTD Internal</a></li> <li><a href="/xml/tutorial/dtd_external_dtd.cfm" title="">DTD External</a></li> <li><a href="/xml/tutorial/dtd_combined_dtd.cfm" title="">DTD Combined</a></li> <li><a href="/xml/tutorial/dtd_fpi.cfm" title="">DTD FPI</a></li> <li><a href="/xml/tutorial/dtd_elements.cfm" title="">DTD Elements</a></li> <li><a href="/xml/tutorial/dtd_element_operators.cfm" title="">DTD Element Operators</a></li> <li><a href="/xml/tutorial/dtd_attributes.cfm" title="">DTD Attributes</a></li> <li><a href="/xml/tutorial/dtd_attribute_default_values.cfm" title="">DTD Attribute Default Values</a></li> <li><a href="/xml/tutorial/dtd_attribute_types.cfm" title="">DTD Attribute Types</a></li> <li><a href="/xml/tutorial/dtd_general_entities.cfm" title="">DTD General Entities</a></li> <li><a href="/xml/tutorial/dtd_parameter_entities.cfm" title="">DTD Parameter Entities</a></li> <li><a href="/xml/tutorial/dtd_embedded_images.cfm" title="">DTD Embedded Images</a></li> </ul> </li> <li> <h3 class="heading-only">XSLT</h3> <ul> <li><a href="/xml/tutorial/xslt_introduction.cfm" title="">XSLT Introduction</a></li> <li><a href="/xml/tutorial/xslt_example.cfm" title="">XSLT Example</a></li> <li><a href="/xml/tutorial/xslt_syntax.cfm" title="">XSLT Syntax</a></li> <li><a href="/xml/tutorial/xslt_template.cfm" title="">XSLT <template></a></li> <li><a href="/xml/tutorial/xslt_apply-templates.cfm" title="">XSLT <apply-templates></a></li> <li><a href="/xml/tutorial/xslt_value-of.cfm" title="">XSLT <value-of></a></li> <li><a href="/xml/tutorial/xslt_for-each.cfm" title="">XSLT <for-each></a></li> <li><a href="/xml/tutorial/xslt_sort.cfm" title="">XSLT <sort></a></li> <li><a href="/xml/tutorial/xslt_if.cfm" title="">XSLT <if></a></li> <li><a href="/xml/tutorial/xslt_choose.cfm" title="">XSLT <choose></a></li> </ul> </li> <li> <h3 class="heading-only">XPath</h3> <ul> <li><a href="/xml/tutorial/xpath_introduction.cfm" title="">XPath Introduction</a></li> <li><a href="/xml/tutorial/xpath_location_path.cfm" title="">XPath Location Path</a></li> <li><a href="/xml/tutorial/xpath_location_path_absolute.cfm" title="">XPath Location Path - Absolute</a></li> <li><a href="/xml/tutorial/xpath_location_path_relative.cfm" title="">XPath Location Path - Relative</a></li> <li><a href="/xml/tutorial/xpath_attributes.cfm" title="">XPath Attributes</a></li> <li><a href="/xml/tutorial/xpath_axis.cfm" title="">XPath Axis</a></li> <li><a href="/xml/tutorial/xpath_node_test.cfm" title="">XPath Node Test</a></li> <li><a href="/xml/tutorial/xpath_predicate.cfm" title="">XPath Predicate</a></li> <li><a href="/xml/tutorial/xpath_node_set.cfm" title="">XPath Node Set</a></li> <li><a href="/xml/tutorial/xpath_comparison_operators.cfm" title="">XPath Comparison Operators</a></li> <li><a href="/xml/tutorial/xpath_boolean_operators.cfm" title="">XPath Boolean Operators</a></li> <li><a href="/xml/tutorial/xpath_number_operators.cfm" title="">XPath Number Operators</a></li> <li><a href="/xml/tutorial/xpath_string_functions.cfm" title="">XPath String Functions</a></li> <li><a href="/xml/tutorial/xml_tutorial_summary.cfm" title="">Tutorial Summary</a></li> </ul> </li> </ul> </nav> <div class="ad ad-left"> <!-- GAM 71161633/QCKIT_quackit/article_vrec_2 --> <div data-fuse="23059511712"></div> </div> </div> <div class="ads"> <div class="ad ad-right"> <!-- GAM 71161633/QCKIT_quackit/article_vrec_1 --> <div data-fuse="23059883626"></div> </div> </div> </div> <div class="searchbox-bottom"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:npmuvy-i8kk"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="30" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> <script src="//cse.google.com/cse/brand?form=cse-search-box-bottom&lang=en"></script> </div> <footer> <p class="about"><a href="/"><i class="fa fa-home"></i> Home</a> | <a href="/about.cfm" rel="nofollow">About</a> | <a href="/contact.cfm" rel="nofollow">Contact</a> | <a href="/terms_of_use.cfm" rel="nofollow">Terms of Use</a> | <a href="/privacy_policy.cfm" rel="nofollow">Privacy Policy</a></p> <p>© Copyright 2000 - 2025 Quackit.com </p> </footer> <script src="/common/js/spectrum/spectrum.js"></script> <script src="/common/js/lightbox2-master/dist/js/lightbox.min.js" charset="utf-8"></script> <script> $(document).ready(function(){ $( "#site-nav-toggler" ).click(function() { $( "#site-nav" ).toggle( "slow" ); }); }); </script> <script> $(function(){var a=window.location.href;$(".sidebar nav a").each(function(){a==this.href&&$(this).closest("li").addClass("selected")})}); </script> </body> </html>