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:body>
<doc:heading level="1">Title</doc:heading>
<doc:para>Text</doc:para>
</doc:body>
</document>
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.
