Comparing XSL and CSS

January 19, 1999

Norman Walsh

XSL and Cascading Style Sheets (CSS) have similar goals, and it's useful to compare them. XSL is more powerful than CSS in many ways, but it's also more complex. XSL and CSS are not competitors. For some common applications (like HTML+ documents that use mostly HTML but have a few extra non-HTML tags thrown in), CSS will be the easiest solution. For others, the manipulative power of XSL will be required.

Although very different, XSL and CSS have two things in common: Each provides a mechanism for selecting elements and for specifying how the selected elements are to be presented. CSS uses selectors and properties in this way:

selector { properties; }
XSL uses patterns and formatting objects:
<xsl:template pattern="pattern">
  <formatting objects/>

Selectors and Patterns. CSS2 (which is considerably more complex than CSS1 with respect to selectors) and XSL each provide a fairly rich set of features for selecting elements. Table 1 compares a few CSS2 selectors and XSL patterns.

CSS2 Selector XSL Pattern Definition
title title Any title
doc > title doc/title A document title (title is a direct child of doc)
doc title chapter//title A title that is any descendant of doc
em[role] em[role] An em element with a role attribute
em[role="bold"] em[role="bold"] An em element when role is "bold"
listitem:first-child listitem[first-of-type()] The first item of a list
n/a listitem[last-of-type()] The last item of a list
n/a equation[child(title)] An equation that has a title
corpauthor + author n/a An author preceded by a corpauthor
Table 1: Some equivalences between CSS2 selectors and XSL patterns.

Much more complex XSL patterns are also possible. For example, this XSL pattern selects an item, other than the first, of a bulleted list in an appendix:

appendix//list[type="bullet", child(title)]/listitem[not-first-of-type()]

Properties and Formatting Objects. CSS properties let you specify a wide range of display characteristics for an element. These properties are "decoration" on the source tree. However, in XSL, you must specify both the result object and its properties.

For example, the following CSS fragment formats a quote as an indented block with some font changes:

quote { display: block;
      font-size: 90%;
      margin-left: 0.5in;
      margin-right: 0.5in; }

In XSL, the same formatting could be achieved with XSL formatting objects using this template:

<xsl:template pattern="quote">
  <fo:block font-size="90%"

The advantage of both constructing a new object and applying properties to it can be seen when you consider the things that you can't do with CSS properties alone:

  • change the order of elements for display;
  • process elements more than once;
  • suppress elements in one place and present them in another;
  • add generated text to the presentation (CSS2 introduced a simple form of pre- and post-element generated text, but falls short of solving the general problem).

Consider the task of presenting names in "Last, First" format. Given this source element:


You need the powerful capabilities of XSL to obtain the desired result:

<xsl:template pattern="author">
  <xsl:process select="surname"/>
  <xsl:text>, </xsl:text>
   <xsl:process select="firstname"/>

With CSS, you can apply properties to the <filename> and <surname> elements, but there is no way to reorder them.

XSL formatting objects are being developed in coordination with the Cascading Style Sheets and Formatting Properties (CSS/FP) Working Group ( The goal of this coordinated effort is to define a single formatting model for both systems. Using these formatting objects, it will be possible to write style sheets that can be rendered on many different devices with reasonably comparable results.

At present, the Working Draft does little more than lay the groundwork for future drafts. It describes a number of formatting objects and outlines their formatting semantics. Most of the formatting objects draw their semantics from a combination of the Document Style Semantics and Specification Language (DSSSL, defined by ISO/IEC 10179:1996) and CSS formatting models. With considerable effort and substantial success, a first attempt at harmonizing these two formatting models has been completed. Over subsequent drafts, these semantics will be harmonized further.

When XSL is complete, XSL formatting objects will provide a device-independent representation for online and print publishing that will include support for sophisticated features such as layout-driven formatting.

The following is a list of common formatting objects defined by the first XSL Working Draft:

  • page-sequence defines a sequence of pages. The formatting of pages in a sequence is described by the pagemaster. Currently only a simple-page-master is defined, sufficient for simple, single-column Web or print publishing.
  • queue gathers content for later insertion into an area or set of areas.
  • sequence is a general wrapper for inline or block content. A sequence provides a wrapper on which shared, inherited properties can be hung.
  • block represents a block of text. Paragraphs, titles, and figure captions are all examples of blocks.
  • list defines a list. List elements contain list-item elements which further contain a list-item-label and a list-item-body.
  • graphic holds an image or vector graphic.
  • link defines a link. A link-end-locator defines the target of a link.