Displaying XML with CSS

XML has no predefined tags, so a browser does not know how to show them. CSS supplies the presentation: link a stylesheet to the XML file with a processing instruction, then style each element by its tag name.

Step 1: link the stylesheet in the XML file

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="books.css"?>
<library>
  <book>
    <title>Web Technology</title>
    <author>A. Kumar</author>
    <price>450</price>
  </book>
  <book>
    <title>Data Mining</title>
    <author>S. Rao</author>
    <price>520</price>
  </book>
</library>

Step 2: write books.css

library { display: block; font-family: Arial, sans-serif; }
book    { display: block; margin: 10px; padding: 8px; border: 1px solid #999; }
title   { display: block; font-size: 20px; font-weight: bold; color: #1a4fa0; }
author  { display: block; font-style: italic; }
price   { display: block; color: green; }

The display property is essential because XML elements have no default display type. Without it, the content appears as one unformatted line.

Limitations: CSS cannot reorder, filter, or compute content or add text; for that, XSLT is used.