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 used in an XML system is presented to a user .

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

Although XML is not generally used for presentation purposes, there are ways to format XML. One of these is to use cascading style sheets (CSS). CSS are used heavily in the HTML world to format content. We can also use CSS to format XML, to a certain degree. Recall that the supplier XML document contains definitions for <companyname> , <street> , <city> , <state> , and <zip> . Now suppose we would like to format each of these definitions as seen in Table 12.3, which provides a specification for how we would like to format the elements of the XML documents.

Table 12.3. Cascading Style Sheet Specification

Tag	Font Family	Size	Color	Display
<companyname>	Arial, sans serif	24	Blue	Block
<street>	Times New Roman, serif	12	Red	Block
<city>	Courier New, serif	18	Black	Block
<state>	Tahoma; serif	16	Gray	Block
<zip>	Arial Black, sans serif	6	Green	Block

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

 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;} 

We can implement this style sheet 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 that was displayed earlier will now be 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:

 <?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 12.11 illustrates how this looks.

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

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