You can utilize the benefits of both CSS and XSLT by using CSS within an XSLT style sheet. The following example shows you how to do this:
XML document (sample.xml)
<?xml version='1.0'?> <?xml-stylesheet type="text/xsl" href="sample.xsl"?> <book-review> <book> <headline><title>A Good Book</title></headline> <headline><author>Robert Brown</author></headline> <headline><publisher>The Publisher</publisher></headline> <headline><date>Feb. 16, 2000</date></headline> </book> <Review><title>A Good Book</title> by <author>Rober Brown</author>, published by <publisher>The Publisher</publisher> on <date>Feb. 16, 2000</date>, is indeed a very good book. </Review> </book-review>
XSLT Style Sheet with CSS (sample.xsl)
<?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <HTML> <HEAD> <STYLE> .title {color:red} .author {font-style:italic} .publisher {color:olive} .date {color:blue} </STYLE> </HEAD> <BODY> <xsl:apply-templates /> </BODY> </HTML> </xsl:template> <xsl:template match="book"> <P> <xsl:for-each select="headline"> <DIV ALIGN="CENTER"><xsl:apply-templates /></DIV> </xsl:for-each> </P> </xsl:template> <xsl:template match="title"> <SPAN class="title"><xsl:value-of select="."/></SPAN> </xsl:template> <xsl:template match="author"> <SPAN class="author"><xsl:value-of select="."/></SPAN> </xsl:template> <xsl:template match="publisher"> <SPAN class="publisher"><xsl:value-of select="."/></SPAN> </xsl:template> <xsl:template match="date"> <SPAN class="date"><xsl:value-of select="."/></SPAN> </xsl:template> <xsl:template match="review"> <P><xsl:apply-templates /></P> </xsl:template> </xsl:stylesheet>