Embedding CSS in XSL
On Day 20 you will learn all about XSL. Before you get that far though, I'm going to jump the gun a little and demonstrate how, with the absolute minimum of XSL knowledge, you can embed CSS properties in an XSL style sheet.
Although there is a W3C note (http://www.w3.org/TR/NOTE-XSL-and-CSS.html) suggesting how CSS and XSL code should be combined, a different method is already implemented in Internet Explorer 5, beta preview 2.
Listing 18.10 shows the later example XML code modified to use an XSL style sheet. Essentially all that changes is the name of the style sheet file and the type declaration.
Listing 18.10 The XML Code Modified to Include an XSL Style sheet
1: <?XML:stylesheet href="css.xsl" type="text/xsl"?> 2: <PAGE> 3: <TITLE>SAMPLE WEB PAGE</TITLE> 4: <html:IMG xmlns:html="htmluri" SRC="logo.gif" ALIGN="middle"/> 5: <PARA>Welcome to one of the world's first WWW Home 6: pages written entirely in XML. This web page has been 7: constructed using:</PARA> 8: <LIST> 9: <ITEM>basic XML code (derived from HTML)</ITEM> 10: <ITEM>a CSS stylesheet to get the page to display in 11: Microsoft Internet Explorer</ITEM> 12: <ITEM>a separate CSS stylesheet to get the page to 13: display in Netscape Communicator</ITEM> 14: <ITEM>another CSS stylesheet to get the page to 15: display in Netscape Mozilla (a September 1998 build)</ITEM> 16: <ITEM>variations of the XML code embedded as 17: pseudo-HTML code inside a standard HTML web page</ITEM> 18: </LIST> 19: <PARA>Explore to your heart's content.</PARA> 20: <WARNING>Note that all of this code is experimental so 21: don't be disappointed if something doesn't quite work the way you 22: think it should.</WARNING> 23: <UPDATE>This page last updated: 21 August 1998</UPDATE> 24: </PAGE>
All the changes occur in the style sheet, as shown in Listing 18.11.
|
Listing 18.11 The XSL Style Sheet Containing the CSS Code
|
1: <?xml version="1.0"?>
2: <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
3:
4: <xsl:template>
5: <xsl:value-of/>
6: </xsl:template>
7:
8: <xsl:template match="/">
9: <HTML>
10: <HEAD>
11: <TITLE>
12: Sample Web Page
13: </TITLE>
14: <STYLE>
15: <![CDATA[
16: LI { margin-left: 24pt; margin-right: 24pt }
17: ]]>
18: </STYLE>
19: </HEAD>
20: <BODY BGCOLOR="#FFFFFF" TEXT="#000000">
21: <xsl:for-each select="PAGE">
22: <xsl:apply-templates/>
23: </xsl:for-each>
24: </BODY>
25: </HTML>
26: </xsl:template>
27:
28: <xsl:template match="PAGE/TITLE">
29: <H1>
30: <xsl:apply-templates/>
31: </H1>
32: </xsl:template>
33:
34: <xsl:template match="PARA">
35: <P>
36: <xsl:apply-templates/>
37: </P>
38: </xsl:template>
39:
40: <xsl:template match="LIST">
41: <UL>
42: <xsl:for-each select="ITEM">
43: <LI>
44: <xsl:apply-templates/>
45: </LI>
46: </xsl:for-each>
47: </UL>
48: </xsl:template>
49:
50: <xsl:template match="WARNING">
51: <P STYLE="margin-left:24pt; color: red;">
52: <xsl:apply-templates/>
53: </P>
54: </xsl:template>
55:
56: <xsl:template match="UPDATE">
57: <HR/>
58: <ADDRESS STYLE="text-align: center">
59: <xsl:apply-templates/>
60: </ADDRESS>
61: </xsl:template>
62:
63:</xsl:stylesheet>
|
| You will learn all about the syntax of XSL in due course. For now all you need to know is that you need a set of XSL statements for each XML element that you want to display that maps the XML element onto the appropriate HTML element: |
<xsl:template match="PARA">
<P>
<xsl:apply-templates/>
</P>
</xsl:template>
If you want to explicitly select an element inside an element, use the parent/child method form so that LIST/ITEM only applies to ITEM elements that appear inside LIST elements. XSL always chooses the most specific match it can find so that none of the other ITEM elements will be affected by this.
If you want to add some style properties to the element you can, as you would in "normal" CSS code, put them inside the element start tag, as shown in lines 51 and 58.
If you want to apply global styles, put them inside a CDATA section, where the code is hidden from the XML processor, as shown in lines 14 to 18.
The end result, shown in Figure 18.9, is almost perfect. Because we're mapping each XML element onto an HTML element, the browser enables you to access as many of the CSS properties as it supports.
Figure 18.9 The XML file in IE5 using CSS inside XSL.
|