Two kinds of style sheet can be used to control the presentation of marked-up documents. Cascading style sheets (CSS) produce presentable documents with minimal effort. They were developed principally in support of HTML, but also work with XML. A parallel development is the extensible stylesheet language (XSL) for XML (and for versions of HTML that are XML compliant). XSL performs the same services as CSS but expresses the style sheet in XML form. It also adds further power by allowing the document structure to be altered dynamically. For example, a particular element type can be constrained to appear at the top of the page, regardless of where it is actually defined.
CSS and XSL share a common heritage and are based on the same formatting model. They share the notion of a rectangular block of content, padded by specified amounts of white space and encased within four borders, which are themselves enclosed by margins. In CSS this is called a box, in XSL an area. They also share the same framework for tables.
To illustrate their similarities and differences, we give parallel examples of each. The next subsection describes CSS: an introduction to its basic structure is given through a small example in Figure 4.10; for an example that illustrates tables and lists, and also the cascading nature of CSS, see Figure 4.11; and for an example that shows context-sensitive formatting, see Figure 4.12. Each of these three figures has two parts, showing the CSS code and a screenshot of the result. An additional example illustrates media-dependent formatting in CSS (see Figure 4.13). The subsection following this provides a parallel description of XSL; Figures 4.14, 4.15, and 4.16 give XSL versions of the three examples (corresponding to Figures 4.10a, 4.11a, and 4.12a for CSS). A final subsection illustrates how XSL can be used for the kind of processing that CSS cannot do.
CSS
Figure 4.9 shows what Figure 4.7 looks like when rendered by an XML-capable Web browser. The display is rudimentary; it shows the raw XML, typically color-coded to highlight different features of the language. Depending on the browser used, it might also be possible to open and close elements interactively.
Figure 4.10a gives a style sheet for the same example, and Figure 4.10b shows the result. Improved formatting makes the three individual agency records easier to read; a different font and type size are used to distinguish the title; and the background is set to white.
Figure 4.9: Sample XML document, viewed in a Web browser
The style sheet is included by adding the line
just after the XML header declaration in Figure 4.7 (the text of Figure 4.10a resides in a file called un_basic.css).
Style sheets specify rules using selector-declaration pairs, such as
The selector, here NGODoc, names an element type in the document. Several rules can apply to a given element—Figure 4.10a includes two for NGODoc. The declaration in braces gives formatting commands for the element—in this case setting the background to white. Declarations consist of property: value pairs, separated by semicolons if necessary.
There is an inheritance mechanism based upon the hierarchical document model that underpins XML. If the style sheet specifies formatting for an element, nested elements—ones beneath it in the document tree—inherit that specification. This makes style sheets concise and perspicuous. It is easy to override inherited behavior: just supply further rules at the appropriate level.
Figure 4.10: (a) Basic CSS style sheet for the United Nations Agencies example; (b) viewing the result in an XML-enabled Web browser
Although inheritance is the norm, some properties are noninheriting. What happens can be informally characterized as "intuitive inheritance" because exceptions to the rule make things behave more naturally. For example, if a background image is specified, it is tiled over the entire page. However, if nested elements inherit the background, they break up the pattern by restarting the image at every hierarchical block and subblock. Thus the background-image property is noninheriting. (You can override the default inheritance behavior by explicitly specifying certain properties to be inheritable or noninheritable.)
Returning to Figure 4.10a, the first rule causes the entire document to be formatted in a block. The second rule augments this element’s formatting to set the background to white and the block width to 7.5 inches. The third declares the Title font to be Times, 25 point, boldface. The fourth places the Agency record in a paragraph block with 8-point spacing above and 3-point spacing below, typeset as 16-point Helvetica. The inheritance mechanism ensures that nested elements share this typeface.
In rule five, the selector contains the two element names Head and Body, and both are assigned top, left, and right margins of 6 points, 0.2 inch, and 5 mm, respectively. Normally a style sheet would not mix units in such a haphazard way. It is done so here to illustrate that CSS supports different units of measurement. Referring to the DTD that begins Figure 4.7, the Head specification applies to the document’s Title, and the Body applies to the Agency node. (Since the two specifications are the same, this effect could have been achieved more concisely by setting these properties in the NGODoc node.) Rule six adds italics to Abbrev, which already inherits 16-point Helvetica from Agency.
The last two rules use a construct known as pseudo-elements. The before and after qualifications perform the operations before and after the Abbrev element is processed—in this case placing parentheses around the abbreviation. Other pseudo-elements give access to the first character and first line of a block. The related construct pseudo-classes can distinguish whether a link has been visited or not, and supports interactive responses to events, such as the cursor hovering over a location.
In general, the ordering of rules in a style sheet is immaterial because every rule that matches any selector is applied. However, it is possible for rules to be contradictory—for example, the background color may be set to both red and blue. The CSS specification includes an algorithm that resolves ambiguity based upon ordering and precedence values.
Style sheets can be used in HTML documents by inserting a <link> tag
into the document’s head. CSS instructions can also be embedded directly into the HTML by enclosing them within <style type="text/css"> … </style> tags.
Cascading style sheets
Style sheets are cascaded when several are applied to the same document. Figure 4.11 shows how the records in our running example can be embedded in a table and the title bulleted, along with the result viewed in a Web browser. The @import command incorporates the un basic style in Figure 4.10a to provide a base layer of formatting rules, which will be augmented by the rules that follow. If conflicts occur, new properties take precedence. Figure 4.11a demonstrates some of CSS’s table and list features.
The first rule augments the title formatting—Times font, 25 point, boldface, as defined in Figure 4.10a—with new specifications: the display type is set to list item, a bullet point (disk) is chosen to show list items, and the list is indented with a left-hand margin of 0.2 inch. These new rules create no conflict. CSS allows you to choose the symbol used for bullet points, use enumeration rather than bullets, and alter the style of enumeration (alphabetic, Roman, etc.). A counter mechanism allows such things as nested section numbering.
The other rules in Figure 4.11a present the document’s information in tabular form. To do this, the style file maps element names to the display settings table, table-row, and table-cell and supplies appropriate stylistic parameters for each. First the Body element is mapped to table, along with values for background color and border style and size. The table layout mode is set to auto, causing the cell dimensions to be calculated automatically to make best use of available space. (The alternative is to specify the layout to be fixed and give cell width and height explicitly.) The value separate for border-collapse separates the borders of the individual cells.
Figure 4.11: (a) Cascading style sheet illustrating tables and lists; (b) viewing the result in an XML-enabled Web browser
The next rule maps the Agency node to table-row, so that each agency’s information is displayed in its own row. The following three rules define Name, Abbrev, and Photo to be table cells and specify some properties: a white background; inset, dotted, and (by omission) plain border styles; padded cells for Name and Abbrev (leaving space inside the border), and horizontally and vertically centered text in Abbrev.
Although the Photo elements in the XML document do not explicitly provide text information between tag pairs, they are defined as type table-cell, and so the table will include empty cells of width 60 points. This illustrates a further point: the pseudo-element before fills the empty cell with the text "photo available."
The end result in Figure 4.11b exhibits a small glitch: the "photo available" message on the last line appears in the second column, not the third. This reflects the structure of the XML document in Figure 4.7, which lacks an abbreviation for the World Bank. CSS does not provide a general mechanism for altering document structure, although some manipulation is possible using pseudo-elements. In contrast, XSL is a more expressive language that allows the document structure to be modified.
There is far more to tables in CSS. Tables can have headers, footers, captions, or sections grouped by row or column, all of which can be structured hierarchically into the final table. CSS shares HTML’s (and XSL’s) table model, and concepts map naturally between the three.
