Transformation Using CSS And XSLT

Introduction

 

XML is known as eXtensible Markup Language. Like HTML, XML is also a markup language. It is used for storing and transporting data, not to display data.

 

Like HTML, it does not have predefined tags. It has only the user-defined tags. XML schema architecture is like a tree structure that has one root element and a number of branch elements. Elements and attributes are used for representing the data.

 

XSLTapplies some user-defined transformations in XML for the presentation of the XML. Using XSLT transforms, we can convert the XML document into various types of documents. 

 

The role of Attribute and Element

 

As per my knowledge, attribute is used to identify an element, but the element is used to store the data. Attribute has no closing tag, but element has a closing tag.

 

Example

 

In the below XML document, "college" and "Student Name" are known as elements while "name" is known as an attribute. 

<college name="GEC">   <!-- name is attribute-->
  <StudentName>Anna</StudentName> <!-- StudentName is element-->
  <StudentName>Smith</StudentName>
</college>

XML Transformation

 

There are two ways by which we can do the XML transformation.

1. CSS (Cascade style sheet)
2. XSLT (Extensible Stylesheet Language Transformations)

Before starting the above transformation approaches, we need an XML document. I will use the below XML document for XSLT transformation.

<?xml version="1.0" encoding="utf-8" ?>
<college>
  <student>
    <Name>Pradosh</Name>
    <RollNumber>100</RollNumber>
    <Branch>CSE</Branch>
  </student>
  <student>
    <Name>Bidyasagar</Name>
    <RollNumber>101</RollNumber>
    <Branch>CSE</Branch>
  </student>
  <student>
    <Name>Bibhu</Name>
    <RollNumber>102</RollNumber>
    <Branch>CSE</Branch>
  </student>
  <student>
    <Name>Nila</Name>
    <RollNumber>103</RollNumber>
    <Branch>ECE</Branch>
  </student>
  <student>
    <Name>Chandan</Name>
    <RollNumber>104</RollNumber>
    <Branch>ECE</Branch>
  </student>
  </college>

After transformation, the raw XML looks like below.

 

 

Trasformation using CSS

 

We need to write some CSS codes using the XML node for XML transformation. I used the below CSS codes for the transformation of the above XML document.

college {
    margin-top:2%;
   padding: 0px 2px;
   background-color: white;
}

student {
   display: block;
   margin-bottom: 2px;
   border-bottom:1px solid red;
}

For rendering the above CSS file to the xml we have a predefined code in XML i.e. 'xml-stylesheet'. We need to add the 'xml-stylesheet' with the properties under the XML declaration.

 

The below image is the reference of how to add style sheet in XML.

 

 

 

After transformation, the XML looks like below.

Transformation using XSLT 

 

To convert the XML document into XHTML or other documents we need to use XSLT. XSLT has various types of predefined approaches. Before moving to the XSLT we need to get knowledge about the approaches.

 

Here I will discuss the various types of XSLT approaches,

1. <xsl:template>
2.  <xsl:value-of>
3. <xsl:for-each>
   
4. <xsl:sort>
   
5. <xsl:if>
   
6. <xsl:choose>

<xsl:template>

 

It is used for finding out the matched nodes from XML using 'match' attribute. we can pass any element from the XML to the 'match' attribute. 

 

It has the following attributes available,

• name
  This attribute is used for adding a template name. This is very unique, two templates can not be available on the same name.
  
  
• mode
  This attribute is used for adding a mode.
  
  
• priority
  This attribute is used for the priority of the document.
  

<xsl:value-of>

It is used for fetching data from the selected node.

It has two following attributes available,

• select - This attribute is used to select the attribute specifying some nodes.
• disable-output-escaping - We can assign this attribute as yes or no. If we choose yes, then the output of the special character will view as it is otherwise it will represent the special character symbols.

<xsl:for-each>

Like other languages for each loop, it iterates the passed conditions. 

<xsl:sort>

It sorts the output.

<xsl:if>

Like other languages 'if' condition is used for conditional statement check.?

<xsl:choose>

This is used during multiple conditional statements.

We need to write some xslt codes using the XML node for XML transformation. I used the below xslt codes for the transformation of the above XML document. 

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:template match="/">
    <html>
      <head>
        <style type="text/css">
          th{
          background-color: bisque;
          }
        </style>
      </head>
      <body>
        <table border="1" style="border-color: red;">
          <tr>
            <th>Name</th>
            <th>Roll Number</th>
            <th>Branch</th>
          </tr>
          <xsl:for-each select="college/student">
            <tr>
              <td>
                <xsl:value-of select="Name"/>
              </td>
              <td>
                <xsl:value-of select="RollNumber"/>
              </td>
              <td>
                <xsl:value-of select="Branch"/>
              </td>
            </tr>
          </xsl:for-each>
        </table>
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

After transformation the XML looks like below.

 

Difference between XSLT and CSS transformation

• CSS is used for the user interface purpose and XSLT is a language where we can implement condition types.
• CSS changes the visual impact whereas XSLT is responsible for structural impact.
• CSS is supported by all the browsers while XSLT is not supported. 

Summary

 

I hope this tutorial will provide information about basics of XML transformation and it will help you to implement of XML  transformation using CSS and XSLT.