Adding a Touch of Style: CSS

And now for something completely different!

So far, we've been concentrating exclusively on producing XML, especially editing documents that have associated DTDs. But what about displaying the XML documents in something other than editors and IE5 (as we saw in Part 1)? Well, there are several alternatives:

1. Associate CSS (Cascading Style Sheets) with the XML document for client side display in fifth generation browsers, such as Internet Explorer 5 and eventually Netscape 5 (currently released as in-progress snapshots).
2. Associate XSL (Extensible Stylesheet Language) with the XML documents, and use server side processing to deliver plain HTML (perhaps with style information) to any generation browser.
3. Apply XSL Transformations (XSLT) to the document and then use XSL Formatting Objects (XSL-FO) to render the result. (The introductory box of WDVL's XSL section explains the distinction between these two parts of the XSL Working Draft.)

Bert Bos included a helpful diagram that shows the interplay among CSS, XSLT and XSL-FO in his talk entitled Style Sheets: CSS, XSL, CSS-OM at the Eighth International World Wide Web Conference.

Option (3) is not possible today, except with specialized tools like FOP and with PDF as the output format. This will change by the end of 1999 as the Formatting Objects part of XSL is finalized and more implementations appear.

Option (2) is the best approach for sites that must deliver XML content to a wide audience where users may be using older browsers with no XML or XSL (and perhaps no CSS) support. IBM's LotusXSL (IBM) is useful for server side transformations. Examples of sites that use server side processing include XML.com, XMLINFO, and finetuning.com.

However, option (1) is extremely simple to implement for those familiar with CSS. You only need to include a reference to a CSS file in the XML document. For example, we can add to our collection1.xml file a single line in which we include the CSS MIME type and the path to the Cascading Style Sheet.

<?xml-stylesheet type="text/css" href="collection.css"?>

As you can see from our XML example, this processing directive appears before the root element of the XML document and after the XML prolog. The associated Cascading Style Sheet follows the normal CSS syntax rules, with two points worth emphasizing:

• Rather than defining styles for HTML elements such as H2 and BODY, the styles are named based on the XML element names, such as Collection, Book, and CD in our example.
• For most elements, you will want to add display: block; to the CSS rule. If not, the element will be rendered inline (with no line break). So, for example, you will define CSS rules such as this:

Book {	display: block; 
	border: solid thin red; 
	font-weight: normal
	}

You may well wonder which browsers support the combination of CSS and XML. At the time of this writing (early July 1999), IE 5 is the only non-beta release that does. However, as you'll see in the next section, Netscape 5 will also support the combination of XML and CSS (and already does today in the beta releases called " milestones").

Just before this article was published, W3C announced that the related specification, Associating Style Sheets with XML documents, had become an official Recommendation. As is usually the case, this announcement was accompanied by a press release and testimonials from vendors. Two remarks are worth noting. The first is from Tim Berners-Lee, W3C Director:

"Style sheets are an essential step in XML deployment, as without them there is no way to define the presentation of XML documents which use new schemas."

"By designing a mechanism that is simple and leverages HTML, we have been able to deliver a recommendation that meets the immediate need for an interoperable way to combine the power of the W3C's XML and CSS recommendations."

Editing it the Cheap Way: EditorMaker
Doing It With XML, Part 2
Viewing It With IE5 and Mozilla, Take 3 (CSS)