Use CSS in XSLT

The XSLT language allows you to manipulate and transform data. An XSLT style sheet handles data presentation with HTML tags, as shown above, when the output is in HTML format. You can also use Cascading Style Sheets (CSS) to format data, just as you would with an ordinary HTML page. The following example uses CSS within an XSLT style sheet.

To add a CSS style sheet to the Transform.xsl file

In the XSLT style sheet you created in the previous step, add a <style> element with CSS style declarations within the <head> element. The <style> element should appear after the <title> element, as follows:

         <head>
            <!-- Referencing a data value as element content: -->
            <title><xsl:value-of select="//summary/heading"/></title>
            <style>
                H1 {background-color:black; color:gold;}
                .desc {color:blue; font-style:italic}
            </style>
         </head>

Replace

 <p><xsl:value-of select="//summary/description"/></p>

with the following statement:

 <p class="desc"><xsl:value-of select="//summary/description"/></p>

Save the XSLT file and refresh the Sales.xml file in Internet Explorer.

The next exercise shows how to Perform Iterations — that is, how to work with a set of elements.