Post
Ask Question

Styling XML Data With XSLT And CSS

These days we are extensively dealing with EXtensible Markup Language (XML) data for communicating with other applications. XML is an easy to understand platform and a machine-independent language. Sometimes we need to display XML data formatted.
 
This article we will explain how to style/design XML data. There are the following two ways to do it:
 
   1. Using CSS
   2. Using XSLT
 
XML

XML is a markup language designed to describe, transport and store data. It is a software and hardware independent language to carry information. And also XML is W3C recommended.
 
Let's design an XML document (tutorial.xml) that we will use in the next sections.
 
tutorial.xml
  1. <?xml version="1.0" encoding="utf-8" standalone="yes"?>  
  2.    <tutorials>  
  3.       <tutorial>  
  4.          <name>XML Tutorial</name>  
  5.          <url>http://www.google.com/xml/tutorial</url>  
  6.       </tutorial>  
  7.       <tutorial>  
  8.          <name>HTML Tutorial</name>  
  9.          <url>http://www.google.com/html/tutorial</url>  
  10.       </tutorial>  
  11. </tutorials>  
Let's start with the design of the XML data.
 
1. Using CSS
 
CSS

Cascading Style Sheet (CSS) is for designing/styling a document written in mark up languages (.html, .aspx, .php, .cfm and so on).
 
The following shows a sample design of a CSS file (tutorial.css).
 
Code
  1. tutorials {  
  2.    color: green;  
  3.    margin: 2em 1em;  
  4.    border: 4px solid #cdf;  
  5.    padding: 0px 1em;  
  6.    background-color: white;  
  7. }  
  8.    
  9. tutorial {  
  10.    display: block;  
  11.    margin-bottom: 1em;  
  12. }  
  13.    
  14. name {  
  15.    display: block;  
  16.    font-weight: bold;  
  17.    font-size: 150%;  
  18. }  
After designing the CSS file, we need to add a CSS reference in the XML file (tutorial.xml).

Now the updated XML code will be the following: 
  1. <?xml version="1.0" encoding="UTF-8" standalone="yes"?>  
  2.    <?xml-stylesheet type="text/css" href="tutorial.css"?>  
  3.    <tutorials>  
  4.       ………  
  5.    </tutorials>  
Once the CSS file is referred to in the XML file then the XML file appends the stylesheet in the current XML and displays the data in the style mode depending on the CSS style.

Secondly the CSS tag name (tutorial) should be the same as the XML node name (tutorial).

Here the tutorial tag is present both in the XML and the CSS file as well and the data is displayed depending on the tutorial tag design in the CSS.
 
Now browse the XML file. You can see the XML data with the designing/styling mode. Please see the following screenshot:
 
 
 Figure 1: Output of XML data using CSS
 
2. Using XSLT
 
XSLT

The EXtensible Stylesheet Language Transformation (XSLT) language is for transforming XML documents into XHTML documents or to other XML documents. Data transformation means parsing an input XML document into a tree of nodes and then converting the source tree into a result tree. Transformation is about data exchange.

Before design a XSLT document we will go through the mostly used XSLT elements and attributes. The prefix xsl: specifies the XSLT elements.

The following are some XSLT elements:
  • xsl:stylesheet: Specifies that the document is a XSL stylesheet. This element defines the namespace to access the XSLT elements and attributes.

    Example:
    1. <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">  
    xsl:template: Declare the HTML template. It uses the Match attribute to search in the XML document. Here “/” means it is for the entire document.

    Example:
    1. <xsl:template match="/"> <html>…</html> </xsl:template>  
    xsl:if: implements an if-else condition. Assume I want to display some example based on condition then this element helps.

    Example:
    1. <xsl:if test="price > 10">..</xsl:if>  
    xsl:sort: sorts the XML data based on a node name. It selects an attribute to provide the node name. The following exmple is sorting the data ordered by the artist XML node's value.

    Example:
    1. <xsl:sort select="artist"/>  
    xsl:choose: implements a Switch-case in XSLT. Inside the choose element it uses a when element to check the values. Inside the when element it uses a test attribute to define the condition for the case.

    Example:
    1. <xsl:choose>  
    2.    <xsl:when test="price > 10">  
    3.       ……  
    4.    </xsl:when>  
    5. </xsl:choose>  
    xsl:for-each: iterates over XML data. Assume I have multiple tutorial nodes present in some XML data then this element helps.

    Example:
    1. <xsl:for-each select="tutorials/tutorial">…</xsl:for-each>  

For more on XSLT please visit here.

Create xslt file: (tutorials.xslt)
  1. <?xml version="1.0" encoding="iso-8859-1"?>  
  2. <!-- Edited by XMLSpy® -->  
  3. <html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">  
  4.    <body style="font-family:Arial;font-size:12pt;">  
  5.       <div style="border-style: solid; color: teal;">  
  6.       <xsl:for-each select="tutorials/tutorial">  
  7.          <div style="color:green;padding:4px">  
  8.             <span style="font-weight:bold; color:blue;">  
  9.             <xsl:value-of select="name"/>  
  10.             </span>  
  11.             <xsl:value-of select="url"/>  
  12.          </div>  
  13.       </xsl:for-each>  
  14.       </div>  
  15.    </body>  
  16. </html>  
How it works 

In the preceding xslt file we loop over (<xsl:for-each) a XML node (tutorials/tutorial) and display the data inside the div with the designed format. It creates a div depending on whether there are no tutorial nodes found inside the XML data.

Now we need to add a reference xslt file inside the XML file (tutorial.xml).
 
See the Yellow marked code that will be additional code. Now the updated code XML will be: 
  1. <?xml version="1.0" encoding="UTF-8" standalone="yes"?>  
  2.    <?xml-stylesheet type="text/xsl" href=" tutorials.xslt"?>  
  3. <tutorials>  
  4.    ………  
  5. </tutorials>  
Browse the XML file to see how the data looks in the browser. Please see the following screenshot: 
 
                                         Figure 2: Output of XML data using XSLT
 
Now we have seen two options to design XML data. The question here is, which option should we choose for what scenario?
 
The following is what CSS can do:
  • Modify the font size, color, family and style of text in markup.
  • Define the location and size of an element.
  • Change the background image and color of elements.
  • Create a new look and feel for markup pages to display on the web. 
The following is what CSS cannot do:
  • Apply if-else conditions depending on content.
  • Looping over (for-each) elements with a switch condition (when, choose).
  • Change the order of elements in a document.
  • Add content to the document.
  • Combine multiple documents into one. 
The preceding can be done using the XSLT language.
 
The following is what XSLT can do:
  • Convert data in a standard XML format into SQL statements, tab-delimited text files or other database formats for data sharing.
  • Transform XSLT style sheets into new style sheets.
  • Turn web pages (written in XHTML) to VoiceML or XHTML basic for handheld devices. 
Conclusion

If XML data is simple and you want to display it in a normal style mode and you don't need any kind of programmatic approach then XML-CSS is the best one. On the other hand if the XML is complex and you want to implement programming logic then XML-XSLT is the best one. According to the W3C, EXtensible Stylesheet Language Transformations (XSLT) is the preferred method for formatting XML because it is far more sophisticated than CSS. XSLT can transform XML into HTML before it is displayed by a browser.
 
I hope you understood how to design XML data in design using two options and use them depending on your requirements.
Happy Coding!! 


Similar Articles