Linking in Cascading Style Sheets
Because CSS now is the de facto standard for formatting in HTML, cascading style sheets are required in the HTML you output from XSLT. This means there are now two style sheets involved—an extensible one and a cascading one—each handling some of the details of the presentation of our data. So from now on, I will refer to a CSS style sheet as CSS and an XSLT style sheet as XSLT, avoiding the use of the term style sheet.
At the simplest level, you can add a CSS reference using a <link> element in your output HTML, by changing the <head> element of the sample XSLT, as shown in Listing 6.7.
Listing 6.7. Referencing a CSS Style Sheet from an HTML <HEAD> Element
<head> <title><xsl:value-of select=”name” /></title> <link rel=”style sheet” type=”text/css” href=”/css/product.css” /> </head> |
This will cause the Web browser to load a CSS from a separate URL; this is usually good news if the client visits more than one page using that CSS, because it will be cached.
You can, of course, decide which CSS to include based on various factors. Products on special offer (indicated by an empty <special-offer /> element within the <product>) might use a different style sheet, as shown in Listing 6.8.
Listing 6.8. Using XSLT to Choose Between Multiple CSS Style Sheets
<head>
<title><xsl:value-of select=”name” /></title>
<xsl:if test=”special-offer”>
<link rel=”style sheet” type=”text/css”
href=”/css/product-special-offer.css” />
</xsl:if:
<xsl:if test=”not(special-offer)”>
<link rel=”style sheet” type=”text/css” href=”/css/product.css” />
</xsl:if:
</head> |
If the people writing up the product reviews want ultimate formatting power, you can provide them with an element in the product file that contains CSS, inheriting from the default product.css, as Listing 6.9 shows.
Listing 6.9. The <css-style> Element
<?xml version=”1.0” ?>
<?xml-stylesheet href=”/xslt/product.xslt” type=”text/xml” ?>
<product code=”UNSPR-1232”>
<css-style>
P { color: rgb(255, 0, 0} }
</css-style>
<name>Unusual Sprocket Assembly</name>
<prices>… |
To use this optional <css-style> element, Listing 6.10 includes a <link> element type in the transformation. When processed by, say, a browser, this <link> brings in the CSS style sheet containing the formatting information for the <css-style> element.
Listing 6.10. How the <css-style> Element Is Handled in a Style Sheet
<head>
<title><xsl:value-of select=”name” /></title>
<link rel=”style sheet” type=”text/css” href=”/css/product.css” />
<xsl:if test=”css-style”>
<style type=”text/css”>
<xsl:value-of select=”.” />
</style>
</xsl:if>
</head> |
Tip
If the mention of CSS styling information in the otherwise “pure data” product file worries you, you probably are correct. Knowing how to write that CSS requires the person writing the <product> element to know something about how it will be formatted as HTML. However, blanket statements about mixing presentation and content cannot easily be made; the XML given in the <product> example above mixes presentation with pure content even without the <css-style> element, because the referenced image files are embedded presentation (Whether to have a blue or black background for the photo of a sprocket assembly is definitely a presentation decision!) and the choice of writing style in the <description> element is definitely a matter of presentation.
So, to summarize, although it is a good general principle to separate out presentation details so that you can provide multiple presentations of the same information, it’s impossible to totally separate out all presentation details. So, don’t throw the baby out with the bathwater trying.
A better approach than our <css-style> element probably would be to allow css-style attributes on the various elements, containing CSS for that element. This allows many CSS properties, such as text formatting, to be specified without needing to make assumptions about the HTML structure used to represent it. Because CSS is not even HTML specific (it can be applied directly to XML), this is a far less representation-specific approach to specifying styling information.