Styling XML Documents with CSS

Make Your XML Look How You Want it To with Cascading Style Sheets

HTML and CSS code in an IDE environment
Boskampi / Pixabay / Creative Commons

Creating an XML document, writing the DTD, and parsing it with a browser are all fine, but how will the document display when you view it? XML is not a language of display. In fact, documents written with XML will have no formatting at all.

So, How Do I View My XML?

The key to viewing XML in a browser is Cascading Style Sheets. Style sheets allow you to define every aspect of your XML document, from the size and color of your text to the background and position of your non-text objects.

Say you have an XML document:

<?xml version="1.0" standalone="yes">
 <!DOCTYPE family [
 <!ELEMENT parent (#PCDATA)>
 <!ELEMENT child (#PCDATA)>
 ]>
 
 <family>
 <parent>Judy</parent>
 <parent>Layard</parent>
 <child>Jennifer</child>
 <child>Brendan</child>
 </family>

If you were to view that document in an XML ready browser, such as Internet Explorer, it would display something like this:

Judy Layard Jennifer Brendan

But what if you wanted to differentiate between the parent and child elements? Or even make a visual distinction between all the elements in the document. You can't do that with XML, and it is not a language that is meant to be used for display.

But luckily, it is easy to use Cascading Style Sheets, or CSS, in XML documents to define how you want those documents and applications to display when viewed in a browser. For the above document, you can define the style of each of the tags in the same way you would an HTML document.

For example, in HTML you might want to define all text within paragraph tags (<p></p>) with the font face verdana, geneva, or helvetica and the background color green. To define that in a stylesheet so that all paragraphs are like that, you would write:

p {
 font-family : verdana, geneva, helvetica;
 background-color : #00ff00;
 }

The same rules work for XML documents. Each tag in XML can be defined in the XML document:

family {
 color : #000000;
 }
 
 parent {
 font-family : Arial Black;
 color : #ff0000;
 border : solid 5px;
 width : 300px;
 }
 
 child {
 font-family : verdana, helvetica;
 color : #cc0000;
 border : solid 5px;
 border-color : #cc0000;
 }

Once you have your XML document and your stylesheet written, you need to put them together. Similar to the link command in HTML, you put a line at the top of your XML document (below the XML declaration), telling the XML parser where to find the stylesheet. For example:

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

As I said above, this line should be found below the <?xml?> declaration but before any of the elements in the XML document.

Putting it all together, your XML document would read:

<?xml version="1.0" standalone="yes">
 <?xml-stylesheet type="text/css" href="stylesheet.css"?>
 <!DOCTYPE family [
 <!ELEMENT parent (#PCDATA)>
 <!ELEMENT child (#PCDATA)>
 ]>
 
 <family>
 <parent>Judy</parent>
 <parent>Layard</parent>
 <child>Jennifer</child>
 <child>Brendan</child>
 </family>