[XML Embedded in HTML][CSS/XSL][Processing Instructions]

Display the XML Document Using cascading stylesheets

Open a new text editor and type the following:

/* File Name: Inventory01.css */
BOOK
{display:block;
margin-top:12pt;
font-size:10pt}
TITLE
{font-style:italic}
AUTHOR
{font-weight:bold}
In your text editor, open the inventory.xml and add the following processing instruction to the end of the document prolog
<?xml –stylesheet type=”text/css” href=”Inventory01.css”?>
This instruction links the CSS to the XML document. Save you xml as Inventory01.xml. This is what you have now:
<?xml version="1.0"?>
<!-- File Name: Inventory01.xml -->
<?xml-stylesheet type="text/css" href="Inventory01.css"?>
<INVENTORY>
<BOOK>
<TITLE>The Adventures of Huckleberry Finn</TITLE>
<AUTHOR>Mark Twain</AUTHOR>
<BINDING>mass market paperback</BINDING>
<PAGES>298</PAGES>
<PRICE>$5.49</PRICE>
</BOOK>
<BOOK>
<TITLE>Leaves of Grass</TITLE>
<AUTHOR>Walt Whitman</AUTHOR>
<BINDING>hardcover</BINDING>
<PAGES>462</PAGES>
<PRICE>$7.75</PRICE>
</BOOK>
<BOOK>
<TITLE>The Legend of Sleepy Hollow</TITLE>
<AUTHOR>Washington Irving</AUTHOR>
<BINDING>mass market paperback</BINDING>
<PAGES>98</PAGES>
<PRICE>$2.95</PRICE>
</BOOK>
<BOOK>
<TITLE>The Marble Faun</TITLE>
<AUTHOR>Nathaniel Hawthorne</AUTHOR>
<BINDING>trade paperback</BINDING>
<PAGES>473</PAGES>
<PRICE>$10.95</PRICE>
</BOOK>
<BOOK>
<TITLE>The Turn of the Screw</TITLE>
<AUTHOR>Henry James</AUTHOR>
<BINDING>trade paperback</BINDING>
<PAGES>384</PAGES>
<PRICE>$3.35</PRICE>
</BOOK>
</INVENTORY>

To play a little with how your document looks like change your css as follows:

/* File Name: Inventory02.css */
BOOK
{display:block;
margin-top:12pt;
font-size:10pt}
TITLE
{display:block;
font-size:12pt;
font-weight:bold;
font-style:italic}
AUTHOR
{display:block;
margin-left:15pt;
font-weight:bold}
BINDING
{display:block;
margin-left:15pt}
PAGES
{display:none}
PRICE
{display:block;
margin-left:15pt}

Displaying your future XML files with CSS?

Will you be using CSS to format your future XML files?

No, we don't think so! But we could not resist giving it a try:
Take a look at this pure XML file: The CD Catalog

<?xml version="1.0"?>
<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>Unchain my heart</TITLE>
<ARTIST>Joe Cocker</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>EMI</COMPANY>
<PRICE>8.20</PRICE>
<YEAR>1987</YEAR>
</CD>
</CATALOG>
Then look at this style sheet: The CSS file
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;
}
Finally, view: The CD Catalog formatted with the CSS file
<?xml version="1.0"?><?xml-stylesheet type="text/css" href="cd_catalog.css"?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
… //here you will put the rest of the XML document
</CATALOG>

We DO NOT believe that formatting XML with CSS is the future of the Web. Even if it looks right to use CSS this way, we DO believe that formatting with XSL will be the new standard (as soon as the main browsers support it).