Linking CSS and XML documents

It's a well known fact that CSS can be used to stylize XML documents. The simplest way to link CSS and XML together is using a particular processing instruction like this:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="test.css" type="text/css"?>

This PI (processing instruction) works exactly as the link element in HTML. So if we have a simple XML document like this:

<document xmlns:doc="http://www.namespaces/document/doc">

    <doc:title>A Test</doc:title>
       <doc:heading level="1">Title</doc:heading>


we can give it the following simple styles:

@namespace doc 'http://www.namespaces/document/doc';

document {

    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    background: silver;


doc|title {

    display: block;
    background: gray;
    color: #fff;
    padding: 1em;
    font-weight: bold;
    text-align: center;


doc|body {

    display: block;
    padding: 2em 0;
    width: 50%;
    margin: 0 auto;


doc|heading[level="1"] {

   display: block;
   font-size: 2em;
   font-weight: bold;
   margin-bottom: 1em;


doc|para {

   display: block;
   font-style: italic;


and get the result depicted in the following picture.

This entry was posted in , by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.