SHARE

Displaying XML Files Using CSS

Written By

Jul 26, 2011

If you’ve ever tried to open an XML file and expected to view it like a typical HTML file, chances are you were disappointed with the results. When you clicked that XML file open, you probably saw something like this (sample code taken from the W3C):

<?xml version=”1.0″ encoding=”ISO-8859-1″?>
<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>

That type of layout does you no good. You can read it, sure, but you’d have a very hard time making sense of an entire report by reading it in this manner. XML files do not carry any formatting information, therefore, you simply see a raw output. The W3C recommends formatting an XML file either with CSS, XSLT or even JavaScript. If you use CSS, it’s as simple as (from the W3C):

CATALOG
{
background-color: #ffffff;
width: 100%;
}
CD
{
display: block;
margin-bottom: 30pt;
margin-left: 0;
}
TITLE
{
color: #FF0000;
font-size: 20pt;
}
ARTIST
{
color: #0000FF;
font-size: 20pt;
}
COUNTRY,PRICE,YEAR,COMPANY
{
display: block;
color: #000000;
margin-left: 20pt;
}

To link the XML file to the CSS, you use this code:

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

What About Complex XML Files?

But let’s say you have an extremely complex XML file that doesn’t fit the traditional CSS formatting method. An excellent example of this are Amazon Associates reports. Amazon allows their Associates to download reports as either TSV or XML files. If you download the XML file, your best bet for viewing this report is by opening it in Microsoft Excel. To do so, start with Excel open, then from the File menu click Open, navigate to the XML report, click it, and then choose to open ‘As an XML table.’ Excel will then notify you that the file does not refer to a schema and will create one for you. Click OK and you’ve got yourself a readable report. It’s still not perfect, but at least you can read it.

According the to the W3C, XSLT (eXtensible Stylesheet Language Transformations) 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.

Here is some example XML code from the W3C that will be formatted through XSLT:

<?xml version=”1.0″ encoding=”ISO-8859-1″?>
<!– Edited by XMLSpy® –>

<breakfast_menu>

    <food>
    <name>Belgian Waffles</name>
    <price>$5.95</price>
    <description>two of our famous Belgian Waffles with plenty of real maple syrup</description>
    <calories>650</calories>
    </food>
</breakfast_menu>

<?xml version=”1.0″ encoding=”ISO-8859-1″?>
<!– Edited by XMLSpy® –>
<html xsl_version=”1.0″ xmlns_xsl=”http://www.w3.org/1999/XSL/Transform” >
<body style=”font-family:Arial;font-size:12pt;background-color:#EEEEEE”>
   <xsl:for-each select=”breakfast_menu/food”>
   <div style=”background-color:teal;color:white;padding:4px”>
       <span style=”font-weight:bold”><xsl:value-of select=”name”/></span>
       – <xsl:value-of select=”price”/>
   </div>
   <div style=”margin-left:20px;margin-bottom:1em;font-size:10pt”>
       <xsl:value-of select=”description”/>

       <span style=”font-style:italic”>
         <xsl:value-of select=”calories”/> (calories per serving)
       </span>
   </div>
   </xsl:for-each>
</body>
</html>

The W3C provides an excellent testing tool here.

In many regards, XML is now considered old news in that it never really caught on as a completely mainstream means to deliver content to the web. However, if you’re like me and need to read Amazon Associates reports, then knowing how to open the XML file in Excel becomes crucial. It’s also good to know that you can format basic XML files in CSS.

Displaying XML Files Using CSS

What About Complex XML Files?

Michael Rohde

Recommended for you...

Company

Categories