Using CSS Rules with XML

A CSS style sheet is made up of rules.

A rule is the association of an element type name, a class, or other part of an XML document with a CSS declaration.

If an XML document includes a title element and you want the text content to be displayed at a font size of 24 points, you could write this:

title {font-size:24pt} 

CSS Syntax

Whether it is internal (in a style element) or external, a CSS style sheet consists of rules. The following CSS rule associates the Arial font of size 36 with the h1 element:

h1 {font-family:Arial, sans-serif; 
font-size:36;} 

The part of the rule outside the curly brackets is called a selector. Selectors can be grouped by separating them using commas. The following rule would apply to both p and li elements:

p, li {font-family:"Times Roman", serif; 
font-size:12;} 

A selector may consist of one or more element type names or may be more focused and include only certain elements that have a class attribute of a particular value. Imagine applying a rule to p elements with a class attribute with the value confidential:

<p class="confidential" ...>Some text<p> 

To make the text red in color, you can use this rule:

p.confidential {color:#FF0000;} 

The period in p.confidential separates the element type name, p, from the value of the class attribute—in this case, confidential.

Inside the curly brackets, you can have one or more declarations. A declaration such as this one consists of a property—in this example, font-family, separated by a colon from its value or values:

font-family:Arial,sans-serif; 

When more than one value exists in a declaration, they are separated by a comma from each other. The end of a declaration is signaled by a semicolon character.

Limitations of CSS Styling

When CSS style sheets are used in the absence of XSLT stylesheets, they have significant limitations with XML documents.

Suppose that you had an XML document with the following structure:

<FaultReports> 
<Fault status="resolved"> 
Internet Explorer will not save HTML files correctly. 
</Fault> 
<Fault status="ongoing"> 
Noisy telephone line to West building. Intermittent loss of 
  Internet connection. 
</Fault> 
<Fault status="resolved"> 
Modem fails to dial external numbers correctly. 
</Fault> 
</FaultReports> 

For example, imagine that you wanted to sort the data so that all ongoing fault reports were grouped and were followed in the displayed document by all resolved fault reports. CSS alone doesn’t enable you to carry out that restructuring of an XML document.

Suppose also that you want to display an image to illustrate something about our data. CSS cannot link images.

Note

Some XML application languages, such as Scalable Vector Graphics (see Chapter 15, “Presenting XML Graphically—SVG”), do have functionality to display vector and bitmap images.