Apply Style to an XML Document with CSS

Make an in-browser XML document more appealing by applying a CSS stylesheet to it.

Cascading Style Sheets (CSS) is a W3C language for applying style to HTML, XHTML, or XML documents (http://www.w3.org/Style/CSS/). CSS Level 1 or CSS/1 (http://www.w3.org/TR/CSS1) came out of the W3C in 1996 and was later revised in 1999. CSS Level 2 or CSS/2 (http://www.w3.org/TR/CSS2/) became a W3C recommendation in 1998. CSS/3 is under construction (http://www.w3.org/Style/CSS/current-work). Understandably, CSS/1 enjoys the widest support.

To apply CSS to an XML document, you must use the XML stylesheet processing instruction, which is based on another recommendation of the W3C (http://www.w3.org/TR/xml-stylesheet). The XML stylesheet processing instruction is optional unless you are using a stylesheet that you want to associate with an XML document in a standard way.

Processing Instructions

A processing instruction (PI) is a structure in an XML document that contains an instruction to an application (http://www.w3.org/TR/REC-xml#sec-pi). Generally, PIs can appear anywhere that an element can appear, although the XML stylesheet PI must appear at the beginning of an XML document (though after the XML declaration, if one is present). The beginning part of an XML document, before the document element begins, is called a prolog.

Here is an example of a PI:

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

A PI is bounded by <? and ?>. The term immediately following <? is called the target . The target identifies the purpose or name of the PI. Other than the XML stylesheet PI, you can find PIs used in DocBook files [Hack #62] and in XML-format files used by Microsoft Office 2003 applications, such as Word [Hack #14] and Excel [Hack #15] .

The purpose of the XML stylesheet PI is to associate a stylesheet with an XML document. The semantics of the XML stylesheet PI are like those of the HTML or XHTML link element. The structures href and type are called pseudo-attributes . The PI actually has six pseudo-attributes, but, to be brief, we’ll discuss only href and type here (for information on the others—title, media, charset, and alternate—see http://www.w3.org/TR/xml-stylesheet).

In the example just shown, href identifies a relative URI for the stylesheet time.css, and type defines a media type for the stylesheet, namely text/css (see http://www.ietf.org/rfc/rfc2318.txt).

Cascading Style Sheets

In HTML or XHTML, you can declare CSS properties within a style attribute, the style element, or an external document associated with the HTML document by a link element. However, in XML you usually need to use CSS properties that are defined in an external document.

Here are a few CSS basics as a refresher. The external stylesheet time.css in Example 1-3 contains nine CSS statements.

Example 1-3. time.css

time {font-size:40pt; text-align: center }

time:before {content: "The time is now: "}

hour {font-family: sans-serif; color: gray}

hour:after {content: ":"; color: black}

minute {font-family: sans-serif; color: gray}

minute:after {content: ":"; color: black}

second {font-family: sans-serif; color: gray}

second:after {content: " "; color: black}

meridiem {font-variant: small-caps}

Each line of time.css contains a CSS statement or statements. Line 1 begins with the selector time (the name of the time element) followed by a declaration enclosed in braces. A declaration consists of one or more property/value pairs; the property and value pair are separated by a colon. If there is more than one pair, they are separated by a semicolon.

The declaration on line 1 consists of two properties: font-size followed by the value 40pt, and text-align with a value of center. The first statement says that all text found inside the time element should be rendered with a point size of 40; the second statement indicates that the content of the element should be centered.

Properties on lines 2, 4, 6, and 8 place generated text before and after the given element, using the content property, together with the :before and :after pseudo-elements, all three of which are part of CSS/2. A pseudo-element in CSS allows you to apply styles to abstractions of elements, such as the first line in an element, the first letter in an element, and before and after an element (see http://www.w3.org/TR/CSS21/selector.html#pseudo-elements).

Tip

IE does not support the :before and :after pseudo-elements along with the content property, so style.xml will not look the same in IE as it does in Firefox (Figure 1-5).

Lines 3, 5, and 7 assign a generic sans serif font using the font-family property, and a gray color using the color property, to the hour, minute, and second elements. Text contained in meridiem (line 9) is to be rendered in small caps, as specified with the font-variant property.

Applying a Stylesheet to an XML Document

Now let’s hook up the stylesheet time.css to the document style.xml (Example 1-4). We’ll do it with the XML stylesheet PI, shown here in bold on the second line of style.xml.

Example 1-4. style.xml

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="time.css" type="text/css"?>
   
<!-- a time instant -->
<time timezone="PST">
 <hour>11</hour>
 <minute>59</minute>
 <second>59</second>
 <meridiem>p.m.</meridiem>
</time>

When you display style.xml in the Firefox browser, for example, the XML processor in the browser interprets the stylesheet PI and applies the named stylesheet to the XML document. The result in Firefox is shown in Figure 1-5.

style.xml in Firefox

Figure 1-5. style.xml in Firefox

With just a few lines of CSS and a PI to pick it up, you can make your XML documents much more readable.

See Also

Get XML Hacks now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial