Most uses of XML eventually result in some sort of Web browser output. Today the most common approach to preparing information in XML for Web publishing is to use XSLT or a lower-level programming language to convert the XML to HTML. However, in some cases you can achieve easier XML Web publishing by using Cascading Stylesheets (CSS) to instruct Web browsers on how to directly display XML. CSS is best known as the recommended method for specifying the presentation of HTML, but recent versions also support XML, and have been embraced by browser vendors as the best-supported means of displaying XML.
Anyone who works with XML should take this tutorial. Even if CSS doesn't cover your needs for production Web publishing, it is a great tool for debugging and experimentation.
This tutorial assumes knowledge of XML, and some basic knowledge of CSS. If you aren't familiar with XML, I recommend you first take the "Introduction to XML" tutorial here on developerWorks.
I recommend, but do not require, familiarity with XML Namespaces and XSLT. If you aren't familiar with XSLT, you might want to take the tutorial "Create multi-purpose Web content with XSLT," also here on developerWorks.
I highly recommend that you try out the examples. To do so you will need a Web browser that supports XML and CSS Level 2 or better. I present the output of all examples using Firefox 1.0 Preview Release on Linux. Firefox is the popular Web browser available on Windows, Mac OS X, Linux, and other platforms. It is based on Mozilla's rendering engine, which has always been known as a very CSS-compliant browser.
In this tutorial you will see many examples of CSS files. All the files used in this tutorial are in the zip file, x-xmlcss-tutorial-files.zip (see Downloads). In this package, all files start with a prefix indicating the section that covers them and the order the examples appear within the section. For example, files from the first example in the third section are named starting with "eg_3_1".
Files with the .css extension are Cascading Stylesheets, and files with the .xml extension are sample XML documents that you can display using the CSS of the same prefix. All but one of the XML documents are in substance the same as eg_3_1.xml, but with different instructions for loading each CSS file.
I do list the example files in each panel, so you can easily locate and experiment with the examples as you take this tutorial.