Styling XML Documents

This article explains styling xml documents using CSS and XSLT.

 

Styling information can be specified for an XML document in one of the two ways. First is by using CSS (Cascading Style Sheets) and the second is by using XSLT (eXtensible Stylesheet Language Transformations) which was developed by W3C. Although using CSS is effective, XSLT is more powerful.

 

Cascading Style Sheets

 

CSS can be specified in a separate file and linked with an XML document by using the xml-stylesheet processing instruction as shown below:

<?xml-stylesheet  type=”text/css”  href=”style.css” ?>

 

As an example consider the following XML document:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="style.css" ?>
<students>
   <student id="1">
      <name>K.Ramesh</name>
      <branch>CSE</branch>
      <age>21</age>
   </student>
   <student id="2">
      <name>M.Suresh</name>
      <branch>CSE</branch>
      <age>21</age>
   </student>
</students>

 

Below is the styling information specified in style.css file:

student {display:block}
name {color:magenta; font-style:italic}

 

XSLT Style Sheets

 

The eXtensible Stylesheet Language (XSL) is a family of recommendations for defining the presentation and transformations of XML documents. It consists of three related standards.

 

First is eXtensible Stylesheet Language Transformations (XSLT) which is used to transform XML documents into different formats including HTML, plain text or XSL-FO.

 

Second is XML Path Language (XPath) is a language for expressions used to identify parts of XML documents.

 

Third is XSL Formatting Objects (XSL-FO) which is used to generate high-quality printable documents in formats such as PDF and PostScript.

 

XSLT is a simple declarative programming language like Prolog. XSLT processor takes both an XML document and an XSLT document as input. The XSLT document is the program to be executed and the XML document is the input data to the program.

 

Parts of the XML document are selected using XPath expressions, possibly modified and merged with parts of the XSLT document to form a new document, which is sometimes called an XSL document.

 

The output document can be stored for future use, or it may be immediately displayed by an application (often a browser). This whole process can be illustrated as shown below:

 

 

An XML document that is to be used as data input to an XSLT style sheet must include a processing instruction to inform the XSLT processor that the style sheet is to be used. The form of this instruction is shown below:

<?xml-stylesheet  type=”text/xsl”  href=”filename.xsl”?>

 

An XSLT style sheet is an XML document whose root element is the special purpose element stylesheet. If the style sheet includes XHTML elements, then the stylesheet tag will be as shown below:

<xsl:stylesheet  xmlns:xsl = “http://www.w3.org/1999/XSL/Transform” xmlns = “http://www.w3.org/1999/xhtml”>

 

A XSLT style sheet document must include at least one template element. The template opening tag includes a match attribute to specify a XPath expression to select a node in the XML document. The content of a template element specifies what should be placed in the output document for the matched node.

 

The apply-templates element applies appropriate templates to the descendant nodes of the current node. In many cases, the content of an XML element should be copied to the output document. This is done by using the value-of element, which uses a select attribute to specify the element whose contents are to be copied.

 

For applying the same style for multiple occurrences of the same element, we can use the for-each element, which uses a select attribute to specify an element in the XML document.

 

Following example presents a XML document and the corresponding XSLT style sheet:

//student.xml - XML document
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="student.xsl" ?>
<students>
   <student id="1">
      <name>K.Ramesh</name>
      <branch>CSE</branch>
      <age>21</age>
   </student>
   <student id="2">
      <name>M.Suresh</name>
      <branch>CSE</branch>
      <age>21</age>
   </student>
</students>

 

//student.xsl - XSLT Style Sheet
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" 
   xmlns:xsl = "http://www.w3.org/1999/XSL/Transform"
   xmlns = "http://www.w3.org/1999/xhtml">
   <xsl:template match="students">
      <html>
      <body>
         <h1>Student Details</h1>
         <table border="1" cellpadding="10">
            <tr>
               <th>Name</th><th>Branch</th><th>Age</th>
            </tr>
            <xsl:for-each select="student">
               <tr>
                  <td><xsl:value-of select="name" /></td>
                  <td><xsl:value-of select="branch" /></td>
                  <td><xsl:value-of select="age" /></td>
               </tr>
            </xsl:for-each>
         </table>
      </body>
      </html>
   </xsl:template>
</xsl:stylesheet>