An XML document may be tied to a CSS (Cascading Style Sheet) style sheet (.css) that specifies styles for the custom elements. If you are not familiar with CSS, see my section on CSS. See also W3C's Associating Style Sheets with XML documents[].

CSS can define styles for XML elements just like it can for HTML elements.

As you will see in the example, this is rather silly. It would be much better to have XML fill regular HTML elements and then apply different CSS classes to those elements depending on the desired effect. You could also have your XSLT output CSS along with its HTML output.


Here is a simple raw, non-styled XML document:

<?xml version="1.0"?>
		<title>Crime and Punishment</title>
		<author nationality="Russian">Fyodor Dostoevsky</author>
		<title>Tom Sawyer</title>
		<author nationality="American">Mark Twain</author>

Click here to see how your browser presents it: egBooks.xml.

Now let's modify the XML document to include a CSS reference:

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

The style sheet looks like this:

book {display:block; margin:10%; font-family:Arial}
title {display:inline; color:red; font-size:24pt;}
author {display:inline; font-size:12pt;}

Click here to see how your browser presents it: egBooksCSS.xml.

Page Modified: (Hand noted: ) (Auto noted: )