Monday, 1 August 2011

Part 6 - CSS & XSLT | XML

With CSS (Cascading Style Sheets) you can add display information to an XML document.

  Displaying your XML Files with CSS?

It is possible to use CSS to format an XML document.
Below is an example of how to use a CSS style sheet to format an XML document:
Take a look at this XML file: The CD catalog
Then look at this style sheet: The CSS file
Finally, view: The CD catalog formatted with the CSS file
Below is a fraction of the XML file. The second line links the XML file to the CSS file:
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="/cd_catalog.css"?>
<CATALOG>
  <CD>
    <TITLE>Empire Burlesque</TITLE>
    <ARTIST>Bob Dylan</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>Columbia</COMPANY>
    <PRICE>10.90</PRICE>
    <YEAR>1985</YEAR>
  </CD>
  <CD>
    <TITLE>Hide your heart</TITLE>
    <ARTIST>Bonnie Tyler</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>CBS Records</COMPANY>
    <PRICE>9.90</PRICE>
    <YEAR>1988</YEAR>
  </CD>
</CATALOG>
Formatting XML with CSS is not the most common method.

  Displaying XML with XSLT

XSLT is the recommended style sheet language of XML.
XSLT (eXtensible Stylesheet Language Transformations) is far more sophisticated than CSS.
One way to use XSLT is to transform XML into HTML before it is displayed by the browser as demonstrated in these examples:
View the XML file, the XSLT style sheet, and View the result.
Below is a fraction of the XML file. The second line links the XML file to the XSLT file:
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="/simple.xsl"?>
<breakfast_menu>
  <food>
    <name>Belgian Waffles</name>
    <price>$5.95</price>
    <description>two of our famous Belgian Waffles</description>
    <calories>650</calories>
  </food>
</breakfast_menu>
If you want to learn more about XSLT, find our XSLT tutorial on w3schools homepage.

  Transforming XML with XSLT on the Server

In the example above, the XSLT transformation is done by the browser, when the browser reads the XML file.
Note that the result of the output is exactly the same, either the transformation is done by the web server or by the web browser.

0 comments em “Part 6 - CSS & XSLT | XML”

Post a Comment

 

E-Learning Copyright © 2011 Powered by Blogger