Using Cascading Style Sheets

From a technical perspective, the concept of portable data often focuses on the movement of data between two points. However, getting the data from point A to point B provides no real value unless the data is presented in an appropriate way. Thus, we must consider how the data transported in an XML system is presented to a user.

Remember that although XML is primarily used to define data, HTML is basically a presentation mechanism. However, XML and HTML can be used in tandem to present data via a browser.

Although XML is not generally used for presentation purposes, there are ways to format XML. One of these is to use CSS. CSS are used heavily in the HTML world to format content. To a certain degree, CSS can be used to format XML. Recall that the supplier XML document contains definitions for <companyname>, <street>, <city>, <state>, and <zip>. Suppose that we want to format each of these definitions, as seen in Table 11.3, to provide a specification that formats the elements of the XML document.

Table 11.3. Cascading Style Sheet Specification

We can represent this in a CSS with the following style sheet:

Click here to view code image

companyname{font-family:Arial, sans-serif;
    font-size:24;
    color:blue;
    display:block;}
street {font-family:"Times New Roman", serif;
    font-size:12;
    color:red;
    display:block;}
city {font-family:"Courier New", serif;
    font-size:18;
    color:black;
    display:block;}
state {font-family:"Tahoma"; serif;
    font-size:16;
    color:gray;
    display:block;}
zip {font-family:"Arial Black", sans-serif;
    font-size:6;
    color:green;
    display:block;}

This style sheet is implemented by adding a line of code in our XML document:

<?xml-stylesheet href="supplier.css" type="text/css" ?>

For example, in the case of the ZIP Code, the simple text displayed earlier is now formatted with a font of Arial Black, the color green, and a font size of 6. The attribute display:block in this case will bring each attribute to a new line.

This code is inserted in the following manner:

Click here to view code image

<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="supplier.css" type="text/css" ?>
<!DOCTYPE supplier SYSTEM "supplier.dtd">
<!-- The XML data -->
<supplier>
<name>
<companyname>The Beta Company</companyname>
</name>
<address>
<street>12000 Ontario St</street>
<city>Cleveland</city>
<state>OH</state>
<zip>24388</zip>
</address>
</supplier>

With the CSS in the XML document, we can now open the document with a browser. Figure 11.10 illustrates how this looks.

Figure 11.10. The XML document using a cascading style sheet.

Take a look at Figure 11.9 again to see how this document was presented without the CSS.