Using CSS with XSLT

If CSS (at least at Level 2) can’t do all that you want with your XML data, you need to explore alternative approaches to displaying that data for some uses. One productive possibility is to use CSS and XSLT together with a source XML data store.

Using XSLT and CSS with HTML Output

If you use both XSLT to create HTML output documents (Web pages) and CSS styling together with the HTML, all four ways of using CSS to style HTML documents are, in principle, available:

  • Linking to an external CSS style sheet using the link element

  • Using the @import directive

  • Using the style element

  • Styling individual HTML elements

One of the reasons for using CSS is that it makes it easier to update styles site-wide, so you most likely will want to use an external CSS style sheet. An external CSS style sheet can be accessed using the link element or the @import directive. The link element is used in the example that follows.

Suppose that you wanted to use the CSS style sheet shown in Listing 13.4 site-wide in an HTML site whose pages are generated using XSLT.

Listing 13.4. MySite.css: A Brief CSS Style Sheet
/* This style sheet is to be used site-wide with HTML pages 
  generated using XSLT */ 
h1 {font-family:Arial, sans-serif; 
    font-size:28; 
    color:#FF0000;} 

h2 {font-family:Arial, sans-serif; 
    font-size:20; 
    color:#0000FF;} 

p {font-family:"Times New Roman", serif; 
   font-size:16; 
   color:black;} 

li {font-family:"Times New Roman", serif; 
    font-size:14; 
    color:#999999;}

The source XML document is shown in Listing 13.5.

Listing 13.5. CSSInformation.xml: A Brief Data Store of Information About CSS
<?xml version='1.0'?> 
<CSSInformation> 
<Techniques> 
<Technique> 
The &lt;link&gt; element 
</Technique> 
<Technique> 
The @import directive 
</Technique> 
<Technique> 
The &lt;style&gt; element 
</Technique> 
<Technique> 
Styling individual elements 
</Technique> 
</Techniques> 
</CSSInformation>

Listing 13.6 is an XSLT stylesheet to create the desired HTML output document.

Listing 13.6. CSSInformation.xsl: An XSLT Stylesheet Creating a Link to a CSS Style Sheet
<?xml version='1.0'?> 
<xsl:stylesheet 
 version="1.0" 
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
  > 
<xsl:output method="html" 
 indent="yes" /> 
<xsl:template match="/"> 
<html> 
<head> 
<title>Techniques for using CSS in HTML</title> 
<link rel="stylesheet" href="MySite.css" /> 
</head> 
<body> 
<h1>Techniques for using CSS in HTML</h1> 
<h2>Techniques</h2> 
<p>The following are the techniques available in CSS2 to use 
  CSS.</p> 
<ul> 
<xsl:apply-templates select="//Technique" /> 
</ul> 
</body> 
</html> 
</xsl:template> 

<xsl:template match="Technique"> 
<li><xsl:value-of select="."/></li> 
</xsl:template> 

</xsl:stylesheet>

Notice the link element in the head section of the literal result elements in the XSLT stylesheet. The rel and href attributes of the link element indicate that the file MySite.css (see Listing 13.4) is to be linked as the CSS style sheet for the HTML document.

Listing 13.7 shows the HTML output document.

Listing 13.7. CSSInformation.html: The Result of the XSLT Transformation
<html> 
 <head> 
  <meta http-equiv="Content-Type" content="text/html; 
    charset=utf-8"> 
  <title>Techniques for using CSS in HTML</title> 
  <link rel="stylesheet" href="MySite.css"> 
 </head> 
 <body> 
  <h1>Techniques for using CSS in HTML</h1> 
  <h2>Techniques</h2> 
  <p>The following are the techniques available in CSS2 
    to use CSS.</p> 
  <ul> 
   <li> 
    The &lt;link&gt; element 
   </li> 
   <li> 
    The @import directive 
   </li> 
   <li> 
    The &lt;style&gt; element 
   </li> 
   <li> 
    Styling individual elements 
   </li> 
  </ul> 
 </body> 
</html>

Figure 13.3 shows the onscreen appearance. When you view the document onscreen, you can see by the size, font family, and color of the text that the CSS styling in MySite.css has been applied to the text in the HTML page.

Figure 13.3. An HTML document displayed using CSS but created using an XSLT transformation.


Combining CSS with XSLT in this way maintains the separation of content and presentation in XML documents. At the same time, linking external CSS style sheets offers the maintenance benefits of CSS.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset