What Are Stylesheets? | XML and SQL Server 2000

Let's look at Figure 2.1 to see where we are in our XML process.

Figure 2.1. Stylesheets in the XML process.

graphics/02fig01.gif

Stylesheets describe how documents are presented to the viewer. Stylesheets attached to structured documents on the Web (for example, HTML) enable authors to change the presentation of documents without sacrificing device independence or adding new HTML tags.

Currently, there are two different types of stylesheets. One is the Extensible Stylesheet Language, which is what this chapter is about, and the other actually consists of two W3C Recommendations, Cascading Stylesheets Level 1 and Cascading Stylesheets Level 2 (CSS1 and CSS2).

Why have two types of stylesheets? Let's look at Table 2.1 for a comparison.

Table 2.1. Stylesheet Functional Comparison

	CSS	XSL
Used with HTML?	Yes	No
Used with XML?	Yes	Yes
Transformations?	No	Yes
Syntax	CSS	XML

The table shows the answer to the question of why there are two separate kinds of stylesheets. Each type was designed to accomplish a different job.

CSS generally is used to style HTML documents. CSS, however, is only a formatting language: It attaches style properties to the elements of a source document. It was not designed to take data and analyze or modify it in any way other than the way in which it is visually presented. It expects an external program to accomplish this process. Isn't that how it's done today? Information from a server database is extracted and put into an HTML template, which is sent to a client's browser for formatting and display.

XSLT, on the other hand, is able to transform documents. For example, XSLT can be used to transform XML data into HTML/CSS documents on the Web server. Did you catch the importance of that statement? One can generate the other; XSLT can generate CSS as part of an HTML document. This way, the two languages complement each other and can be used together.

XSLT can be used to transform data in several ways:

Server-side XSLT is utilized to transform XML data into other XML documents with CSS stylesheets. In this case, because XML itself comes with no formatting conventions, it will always need a stylesheet to describe its display characteristics. Client browsers will need additional functionality with this method to accomplish the stylesheet interpretation. One additional concern with this method is that unless XSLT sheets are provided, there might be accessibility problems.
Server-side XSLT is utilized to transform XML data into HTML documents with CSS stylesheets. Presently, this is the most common combination of XSLT and CSS. Because HTML is so widespread and well known, this method has the side benefit of being one of the best ways to ensure that information in lesser-known formats is accessible. Client browsers will need no new additional functionality with this method.
Client-side generation of HTML/CSS utilizes XSLT and XML on the client. The content is passed through HTML/CSS to take advantage of current imple-mentations. Client browsers will need additional functionality with this method.
Last, utilize a standalone program external to both the server and the client. This program will utilize an XSLT stylesheet to perform the transformations and to generate the required document. A disadvantage of this method is that it really can't and shouldn't be used to provide real-time data transformations and updates. It's just not practical. A benefit of this method, just like the previous point, is that client browsers will need no new additional functionality with this method. A common example is business-to-business e-commerce document interchange in which an XML document needs to be rearranged into another different XML document.

The first and second points are methods employed by Microsoft's SQL Server 2000 to accomplish transformations.

The W3C has a note on the Internet that makes for interesting reading. "Using XSL and CSS Together" is available at http://www.w3.org/TR/1998/NOTE-XSL-and-CSS-19980911.

HTML Stylesheet

Listing 2.1 is an example of a CSS for an HTML document.

Listing 2.1 CSS for an HTML Document

 <style type="text/css">    body {     font-family: geneva,arial,sans-serif;      color: #333333;      margin-top: 0px;      margin-left: 0px;      }    A {     color: #006666;      }    hr {     color: #999999;      height: 1px      }    <!-- for disks/catalog listings - tightens leading -->    tr.small {     line-height: 1;      }    .bodycopy {     font-family: geneva,arial,sans-serif;      font-size: 12px;      color: #333333;      }    .bodycopysmall {     font-family: geneva,arial,sans-serif;      font-size: 11px;      color: #333333;      }    .productname {     font-family: geneva,arial,sans-serif;      font-size: 12px;      color: #333333;      }  </style>

The stylesheet is delimited with <STYLE> </STYLE> and is given the attribute type="text/css" , letting the client's browser know to interpret the following statements as a CSS stylesheet. Inside the stylesheet, there are a variety of element definitions. For example, the HTML tag elements <A> (anchor), <HR> (horizontal rule), and <TR> (table row) are defined with the characteristics they will use throughout the document unless overridden. In addition, there are some definitions that are not HTML tags themselves but that define properties to be used with any HTML tags to which the definitions are attached. This is usually done with the CLASS attribute of HTML tags, like this:

 <FONT CLASS="productname">Iomega Zip Drive</FONT>

Not all browsers support CSS. Netscape and Internet Explorer do support CSS, but each has its own level of support. The moral of the story? It will be a while before there is uniform support for CSS.

Simple XSLT Stylesheet

Listing 2.2 is an example of an XSLT stylesheet.

Listing 2.2 Sample XSLT Stylesheet

 <?xml version="1.0"?>  <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">  <xsl:template match="/">    <HTML>    <BODY>      <TABLE BORDER="2">        <TR>          <TD>Name</TD>          <TD>Address</TD>          <TD>Tel</TD>          <TD>Fax</TD>          <TD>Email</TD>        </TR>    <xsl:for-each select="PEOPLE/PERSON">        <TR>          <TD>    <xsl:value-of select="NAME" />          </TD>          <TD>    <xsl:value-of select="ADDRESS" />          </TD>          <TD>    <xsl:value-of select="TEL" />          </TD>          <TD>    <xsl:value-of select="FAX" />          </TD>          <TD>    <xsl:value-of select="EMAIL" />          </TD>          </TR>    </xsl:for-each>        </TABLE>      </BODY>      </HTML>  </xsl:template>  </xsl:stylesheet

This stylesheet will generate an HTML page that is a listing of addresses obtained from an XML document.

Looking at this example, we see a lot of things that we've seen before and some that we haven't. The following are some of the things we've seen before:

First, the XML declaration <?xml version="1.0"?> . After all, an XSLT stylesheet is an XML document.
Second, a namespace declaration declaring the tag prefix of XSL, xmlns:xsl="http://www.w3.org/TR/WD-xsl" . This is the generally accepted default for XSLT stylesheets.
Third, a lot of HTML tags. These tags will be inserted in the output document at the appropriate place dictated by the stylesheet.

Some of the things we haven't seen before are, first, the stylesheet delimiters <xsl:stylesheet> </xsl:stylesheet> . These perform the same function as the CSS <STYLE> tag. Second, we haven't seen three new declarations that belong to the domain of the stylesheet:

xsl:template match=
xsl:for-each select=
xsl:value-of select=

We'll cover these new instructions in depth in this chapter. Right now, I just want you to see that, as different as CSS and XSLT stylesheets are in appearance, they are also different in function.