Overview of CSS and XSLT | XML and ASP.NET

only for RuBoard

The common technologies for styling XML for display are CSS and XSLT. CSS enables the developer to specify HTML styles for an element, including font, weight, size , and position. XSLT is capable of styling XML and transforming XML tree structures into new structures. This section looks at the uses for each, and develops examples that use each technology.

CSS Basics

CSS is most commonly used with HTML files to generate themes for HTML sites so that changing the display of one tag does not require massive updates throughout the website to make the change consistent. You can make your HTML files leaner because they do not require as much markup to achieve the same effect, which improves overall site performance due to smaller HTML files being transferred over the network and faster parse times on the client.

For example, suppose that you want to display your company's name with a specific font every time it appears. You can use an HTML <font> tag to specify the font's face, color , and size, as shown here:

 <font color="Blue" face="Tahoma" size="2">Xmlandasp.net </font>

Suppose that you used the preceding font tag throughout your application. Months later, your marketing department tells you that the blue color should be changed to gray to be more appealing to the eye. So, you search through your entire site to find each instance of the previous HTML code and replace the color attribute's value with Gray :

 <font color="Gray" face="Tahoma" size="2">Xmlandasp.net </font>

Here's a more solid example. Suppose that you are developing a site that you want to sell to multiple vendors . Each vendor wants his own branding on the site. Instead of developing custom HTML for each vendor, you want to create a single set of HTML pages that can be used for each vendor. How do you accomplish this? The answer is CSS.

Instead of defining the layout within the HTML tag, you can separate the semantics of a layout scheme from its implementation.

Defining Element Styles

You can use CSS to define the style associated with a particular element. CSS works on the basis of rules: Rules are defined to match instances within the document being implemented. This is what each instance of the HTML <H1> and <H2> elements will look like:

 H1  {     font-weight: bold;      font-size: 16pt;      color: blue;      font-family: Verdana, Tahoma, Arial;      text-decoration: none;  }  H2  {     font-weight: bold;      font-size: 14pt;      color: black;      font-family: Verdana, Tahoma, Arial;      text-decoration: none;  }

In each page that uses this stylesheet, any reference to an HTML <H1> tag is a blue, 16-point font, and an <H2> font is slightly smaller and black. You can use this method to define what each HTML element looks like throughout your website.

You can see that you can simply define what a particular element looks like. Now, it's time to see how to use these style rules. CSS styles are applied to HTML in several ways: linking, importing, as part of the document, or as an inline definition.

Styles can be applied by linking to an external CSS stylesheet. In an HTML file, for example, you might specify the following in the HTML head section:

 <html>  <head>  <link type="text/css" rel="stylesheet" href="xmlandasp.css">  </head>  <body>     <h1>This text is whatever is defined in "xmlandasp"</h1>  </body>  </html>

The href attribute specifies the location of the external stylesheet. This location can be a relative path or a URL.

In addition to linking to the external stylesheet, the external CSS document can also be imported by using the @import directive, as shown here:

 <html>  <head>  <style type="text/css">  @import url(../www.xmlandasp.net/default.htm /styles.css);  </style>  </head>  <body>     <h1>This text is whatever is defined in "styles.css"</h1>  </body>  </html>

Although external resources can be referenced, it is sometimes feasible to include styles within the current document or even inline. To define a style within the current document, again use the HTML style tag within the HTML head section:

 <html>  <head>  <style type="text/css">    h1 {font-family: verdana; color: green; }  </style>  </head>  <body>     <h1>This text is a Verdana font, colored green</h1>  </body>  </html>

Finally, you can include style definitions inline with elements as they appear. For example, you might use an HTML span element and declare a style on the fly:

 <html>  <head>  <style type="text/css">     h1 {font-family: verdana; color: green; }  </style>  </head>  <body>     <span style="color: blue; text-decoration: underline;">This is some blue  underlined text</span>  </body>  </html>

Typically, it is considered best to include all CSS style rules in a separate document and link them by using the link HTML element. Should a style change, there would only be a single file to update rather than all 300 HTML or .aspx pages that reference the style rule.

Note

For brevity, this chapter uses document styles using the HTML style element.

Defining Element Classes

You can use CSS to define your classes to apply to different HTML elements. A CSS class enables you to develop specific types of a broader class that are applied by using a class selector.

For example, you might declare a style rule for all H1 elements in an HTML document by using the following code:

 h1 {font-family: verdana; color: green; }

After you develop your pages, you notice that you sometimes need to add several properties to this element, such as underlining and italics, but you do not need this behavior for all instances. One way to do this is to define a CSS class. A CSS class defines a more specific implementation of a broader class and is referenced by using the HTML class selector, as shown here:

 <html>  <head>  <style type="text/css">     h1 {font-family: verdana; color: green; }     h1.modified {font-family: tahoma; color: blue; text-decoration:  underline;}  </style>  </head>  <body>     <h1>This text is green in Verdana font</h1>     <h1 class="modified">This text is blue and underlined Tahoma font</h1>  </body>  </html>

By now, you have probably heard of CSS and have probably seen it in use. The minute details of CSS are not covered in this book. Instead, you are urged to read the W3C Recommendation for CSS at www.w3.org/TR/REC-CSS1. What is important is the realization that you can use CSS directly with XML and HTML.

Associating XML with CSS

We briefly discussed CSS in the previous section to remind the user of the syntax of CSS and its usefulness . CSS can link directly with XML to display the XML document. The W3C recommendation (at www.w3.org/TR/xml-stylesheet/) specifies the valid ways of associating XML and CSS. One way is to use a processing instruction in the prolog (after the XML declaration and before the document element), as shown here:

 <?xml version="1.0" encoding="utf-8" ?>  <?xml-stylesheet href="pitchers.css" type="text/css"?>  <PITCHERS>       <PITCHER>            <FNAME>John</FNAME>            <LNAME>Rocker</LNAME>             <TEAM>Indians</TEAM>            <CITY>Cleveland</CITY>            <ERA></ERA>       </PITCHER>  </PITCHERS>

We associated the XML with a stylesheet called pitchers.css . Now build that style in the following code:

 CITY  {      color: blue;  }  TEAM  {      font-weight: bold;  }

There's not much to it. When a CITY element is displayed, it is displayed with a blue font; when a TEAM element is displayed, it comes through as bold text.

There are many other possibilities for using CSS with XML directly. You can use CSS positioning and build complex rules to generate interesting effects. The tradeoff is that the CSS rules can become overly complex and difficult to debug.

A more popular use of CSS is to apply CSS to the HTML that is the result of an XSL transformation. The next section looks at using CSS and XSLT in more detail.

When you open an XML document in Internet Explorer, it's already styled although you did not specify any stylesheet for the XML document. This is because IE uses a default stylesheet when no stylesheet is specified. The default stylesheet for Internet Explorer is an internal resource; however, you can view it by typing the following code in the IE Address bar:

 res://msxml3.dll/defaultss.xsl

Although you can view the XSL, you cannot change it because it is an internal resource. But, viewing it can give you a good idea of working with an XSLT stylesheet. This leads us into the next section.

XSL Versus CSS

CSS suffers from a number of limitations for complex documents. For example, CSS cannot render documents that do not contain display information (which is why the preceding example produced little). A good summary of these limitations can be found at www.xml.com/pub/a/w3j/s3.leventhal.html. To overcome these limitations, the W3C started a working group to address the problems of applying styles to XML. The result was XSL. XSL encompasses XSLT and XSL Formatting Objects (XSL-FO). XSLT processes documents and transforms a source document tree into another tree representation. XSL-FO applies formatting to a resultant document, such as an Adobe Acrobat PDF file.

Note

This book does not cover XSL-FO. IE doesn't yet support XSL-FO, and the reader should be able to apply this technology after he or she understands the base concepts of working with XSLT. For more information on XSL-FO, see the W3C's home page at www.w3c.org.

only for RuBoard