How do I style an XML file with CSS?
Author: Deron Eriksson
Description: This tutorial demonstrates how to associate a stylesheet with an XML file.
Tutorial created using: Windows XP


The default, normally if you try to view an xmlW file in a browser, you will see the XML file without styles. As an example, take the following simple XML file:

test.xml

<?xml version="1.0" encoding="UTF-8"?>
<people>
	<person>
		<name status="real">Deron Eriksson</name>
		<birthdate>January 22, 1972</birthdate>
		<eyes>blue</eyes>
	</person>
	<person>
		<name status="imaginary">Bob Smith</name>
		<birthdate>December 25, 1989</birthdate>
		<eyes>brown</eyes>
	</person>
</people>

If we view test.xml in IE7, we see the following:

test.xml in IE7

It's actually possible to associate a stylesheet with an XML file, as described at http://www.w3.org/TR/xml-stylesheet/. We can accomplish this by using an "xml-stylesheet" processing instruction to specify the href of a stylesheet to associate with the XML document. So, I took the previous XML document and added the following:

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

This modified XML file can be seen here:

mytest.xml

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="mytest.css"?>
<people>
	<person>
		<name status="real">Deron Eriksson</name>
		<birthdate>January 22, 1972</birthdate>
		<eyes>blue</eyes>
	</person>
	<person>
		<name status="imaginary">Bob Smith</name>
		<birthdate>December 25, 1989</birthdate>
		<eyes>brown</eyes>
	</person>
</people>

The mytest.xml file references the mytest.css file, shown here:

mytest.css

people {
	background-color: lightsteelblue;
	display: block;
	padding: 10px;
	font-family: sans-serif;
}

person {
	background-color: chartreuse;
	border: 2px solid black;
	display: block;
	margin-bottom: 10px;
}

name {
	font-weight: bold;
	display: block;
}

birthdate {
	display: block;
}

eyes {
	display: block;
}

If we use IE7 to view the mytest.xml file, we now see that it has had the defined CSSW styles added to it.

mytest.xml in IE7

Notice that this does not display the values of the name element's status attribute, which has values of "real" or "imaginary". For browsers that support CSS2 (like Firefox), it's possible to modify our CSS file to display information such as attribute values. To see a demonstration of this, we'll use the mytest2.xml file, which is identical to mytest.xml except for the reference to mytest2.css.

mytest2.xml

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="mytest2.css"?>
<people>
	<person>
		<name status="real">Deron Eriksson</name>
		<birthdate>January 22, 1972</birthdate>
		<eyes>blue</eyes>
	</person>
	<person>
		<name status="imaginary">Bob Smith</name>
		<birthdate>December 25, 1989</birthdate>
		<eyes>brown</eyes>
	</person>
</people>

The mytest2.css file is shown below. Notice that we added code such as "name:before" to specify text to come before our name value is displayed and "name:after" to specify text to come after. Notice that we can reference that attribute value via "attr(status)".

mytest2.css

people {
	background-color: lightsteelblue;
	display: block;
	padding: 10px;
	font-family: sans-serif;
}

person {
	background-color: chartreuse;
	border: 2px solid black;
	display: block;
	margin-bottom: 10px;
}

name {
	font-weight: bold;
	display: block;
}
name:before {content: "Name: "}
name:after {content: " (" attr(status) ")"}

birthdate {
	display: block;
}
birthdate:before {content: "Birthdate: "}

eyes {
	display: block;
}
eyes:before {content: "Eye color: "}

The following screen capture shows mytest2.xml displayed in Firefox and IE7. Notice that Firefox adds the desired text since it supports CSS2 and that IE7 doesn't add the desired text.

mytest2.xml in Firefox and IE7