CSS Home

Using Cascading Style Sheets to Display XML

Cascading Style Sheets can be used to display XML data. Since most syndicated web content is XML and many databases are migrating to XML also, this is a particularly useful feature. Tags in XML specify content rather than format, so the combination of CSS and XML allows content and display to be separated into two separate files. The following example will put the content between <advertisement> tags in a 200 pixel wide box with blue font, white background and a blue solid border that is 2 pixels wide. The box will be displayed on the right side of the page.

External File (called style.css):
advertisement {width:200px; float:right; font-size:28px; color:blue; background-color:white; border:2px solid blue;}
Requires the XML Page Header to contain:
<?xml-stylesheet type="text/css" href="style.css" ?>

Note that any formatting within the advertisement would require more CSS commands associated with XML tags within the advertisement. Since XML contains no display parameters, displaying a large XML data set can require a large stylesheet. The following example uses CSS to display an XML file. Remember to use the view source command to see the XML file.

A style sheet standard designed for XML is XSL. Besides incorporating the style features of both HTML and CSS, XSL includes XSLT. Short for Extensible Stylesheet Language Transforms, XSLT includes some programming capabilities.

©2003 All Rights Reserved