XML (eXtensible Markup Language) and XSL (eXtensible Stylesheet Language) takes seperation of form and content a step further then HTML with CSS. XML is a W3C standard while XSL is yet in the making and not yet a standard. An XML page is like valid HTML with all tags closed, all attribute values enclosed in quotation marks, case-sensitive tags etc., so it's a lot more strict. Then some style-sheet language like XSL can output this page into HTML, even in a complete different order then the XML elements where written. I noticed that when you reload an XML/XSL page several times (like when you edit and change it), you have to restart the browser in order to see the page again.
Sample page
The following sample *.XML (take a look at how this XML page is displayed) contains structured information about some comics:
<?xml:stylesheet type="text/xsl" href="comic.xsl" ?>
<comics>
<comic>
<company>Marvel</company>
<title>Spider-Man</title><subtitle>The Amazing</subtitle>
<issue>300</issue>
<pencils>Todd McFarlane</pencils>
<content>Special Issue with an appearance of Spawn</content>
<price>20</price>
<status>near-mint</status>
</comic>
<comic>
<company>Marvel</company>
<title>Punisher</title><subtitle>The</subtitle>
<issue>1</issue>
<pencils>John Romita, JR</pencils>
<content>The new Punisher</content>
<comment>Good story and artwork</comment>
<price>6</price>
<status>mint</status>
</comic>
</comics>
This page has two entries describing a comic. With HTML/CSS you'd probably write it like <div class="price">$20</div> etc. With XSL (to which the sample above links to in line 2) you can now process this page, and also add text like the dollar symbol.
<html xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<body style="background-color: #003; text-align: center; color: #fcc; font-family: sans-serif">
<h1 style="font-size: 20px; text-align: center">List of Comics</h1>
<xsl:for-each select="comics/comic">
<div style="width: 300px; background-color: #336; border: 2px; border-color: #99c; border-style: solid; margin-bottom: 10px; padding: 6px">
<span style="font-weight: bold"><xsl:value-of select="title"/></span>,
<xsl:value-of select="subtitle"/>
<div style="background-color: #fff; text-align:left; color: #000; margin: 3px; padding: 6px; font-size: 14px">
<p style="font-style: italic">
Published by <xsl:value-of select="company"/><br/>
Pencilled by <xsl:value-of select="pencils"/><br/>
Current price $<xsl:value-of select="price"/>
</p>
<p><xsl:value-of select="content"/></p>
</div>
</div>
</xsl:for-each>
</body>
</html>
This XSL goes through all the "comic" elements and assigns styles to them, or adds text before and after. You could even put this information in a table.
Continue with: CSS.