A brief CSS2 tutorial for XML

CSS can be used with any structured document format, for example with applications of the eXtensible Markup Language [XML10]. In fact, XML depends more on style sheets than HTML, since authors can make up their own elements that user agents don't know how to display.

Here is a simple XML fragment:


Fredrick the Great meets Bach

Johann Nikolaus Forkel


One evening, just as he was getting his

flute ready and his

musicians were assembled, an officer brought him a list of

the strangers who had arrived.



To display this fragment in a document-like fashion, we must first declare which elements are inline-level (i.e., do not cause line breaks) and which are block-level (i.e., cause line breaks).

INSTRUMENT { display: inline }

ARTICLE, HEADLINE, AUTHOR, PARA { display: block }

The first rule declares INSTRUMENT to be inline and the second rule, with its comma-separated list of selectors, declares all the other elements to be block-level.

One proposal for linking a style sheet to an XML document is to use a processing instruction:





Fredrick the Great meets Bach

Johann Nikolaus Forkel


One evening, just as he was getting his

flute ready and his

musicians were assembled, an officer brought him a list of

the strangers who had arrived.



Notice that the word "flute" remains within the paragraph since it is the content of the inline element INSTRUMENT.

Still, the text isn't formatted the way you would expect. For example, the headline font size should be larger than then rest of the text, and you may want to display the author's name in italic:

INSTRUMENT { display: inline }

ARTICLE, HEADLINE, AUTHOR, PARA { display: block }

HEADLINE { font-size: 1.3em }

AUTHOR { font-style: italic }

ARTICLE, HEADLINE, AUTHOR, PARA { margin: 0.5em }

Adding more rules to the style sheet will allow you to further improve the presentation of the document.