Using CSS as a Stand-alone Style Sheet

CSS can provide a static and restrictive rendering of an XML document for Web display. The order of the source XML elements determines the layout of display. Because you cannot manipulate the source document content with CSS, you have very little run-time control of the display. The following example illustrates how an XML document uses CSS to display the content.

XML Source document (sample.xml)

<?xml version='1.0'?>
<?xml-stylesheet type="text/css" href="sample.css"?>
<book-review>
   <book>
      <headline><title>A Good Book</title></headline>
      <headline><author>Robert Brown</author></headline>
      <headline><publisher>The Publisher</publisher></headline>
      <headline><date>Feb. 16, 2000</date></headline>
   </book>
   <Review>
<title>A Good Book</title> by <author>Rober Brown</author>, published by <publisher>The Publisher</publisher> on <date>Feb. 16, 2000</date>, is indeed a very good book.
   </Review>
</book-review>

Cascading Style Sheet (sample.css)

title {display:inline; color:red}
author {display:inline; font-style:italic}
publisher {display:inline; color:olive}
date {display:inline; color:blue}
review {display:block; font-size:12}
book {display:block; font-size:16; font-weight:bold}
headline {display:block; margin:1em}

Copy both the XML source document and the cascading style sheet, above. Paste them into the files, and save the files as sample.xml and sample.css, respectively. Open the sample.xml with Internet Explorer to see the resulting display.