In the previous tutorials in this series (Part 1 and Part 2), Uche Ogbuji showed how to use Cascading Stylesheets (CSS) to display XML in browsers, presenting basic techniques and advanced topics. Some discussions present XSLT and CSS as opposing technologies for presenting XML, but I find little reason to view them this way. Each one offers far more to complement than to counter the other.
This cooperation has many manifestations, but the most common is using XSLT to generate CSS and include it in the output. XSLT provides more algorithmic power than CSS, so these two technologies form a very rich combination. This tutorial builds on its predecessors to explore this combination.
Much XML ultimately finds its way to Web browsers in one way or another. CSS is a great way to make XML presentable in browsers. CSS is best known as the recommended method for specifying the presentation of HTML, but recent versions also support XML; in fact, several browser vendors have embraced it as the best-supported means of displaying XML. CSS is also used in other XML vocabularies such as SVG and XForms.
XSLT is the most widely used means of manipulating XML. It can also be used for display presentation, but CSS is more often used for final browser display. XSLT is a very different approach -- more complex, but more powerful -- and it's supported by many of the browsers that also support CSS.
Anyone who works with XML should take this tutorial. Even if CSS and XSLT don't cover your needs for production Web publishing, they are great tools for general processing, debugging, and experimentation. They offer rich interaction with other XML technologies and you'll likely run into CSS and XSLT even when you least expect them.
This tutorial assumes knowledge of XML, CSS, XPath, and XSLT. If you aren't familiar with these technologies, I recommend that you first take whichever of the following tutorials suits your needs:
- "Introduction to XML"
- "Use Cascading Stylesheets to display XML, Part 1" (introduces the use of CSS to style XML in browsers)
- "Use Cascading Stylesheets to display XML, Part 2" (covers advanced topics for the use of CSS to style XML in browsers)
- "Get started with XPath"
- "Create multi-purpose Web content with XSLT"
I highly recommend that you try out the examples in this tutorial. Some are best checked out with a stand-alone XSLT processor. I use 4Suite 1.0b1. Some require a Web browser that supports XML, XSLT 1.0, and CSS Level 2 or better. When showing browser output examples I show screenshots of Firefox 1.0.4 on Fedora Core Linux. Firefox is a popular Web browser available on Windows, Mac OS X, Linux, and other platforms. It is based on Mozilla's rendering engine, which is 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 file x-xmlcss3-tutorial-files.zip (see Downloads). In this package, all files start with a prefix indicating what section they are covered in and what order of examples within the section. For example, files from the first example in the third section are named starting with "eg_3_1".
Files ending with .css are Cascading Stylesheets, files ending with .xsl are XSLT, and those ending in .xml are sample XML documents. The latter are to be processed, usually using XSLT of the same prefix. The various XML, CSS, and XSLT files do not always match. A few of the files use more specialized extensions, such as .svg for Scalable Vector Graphics.
I do take care to further list the example files in each panel and how each relates to the other, so if you follow along with the tutorial you should be able to locate and experiment with the examples easily enough.