Random Access   chris, kp & rob
Tech Take-Apart
Introduction to XML, Part II
by kp


Geek Level: Beginner/Intermediate
HTML, XHTML, CSS or web-based programming experience helpful

Geek Tools:
Text editor or web development WYSIWYG; web browser

In last month's article, I introduced some of the basics of XML. I covered how to design a custom XML file and use DTDs and schemas to define your data. This month, I'm going to elaborate on how to style your XML to be readable within a HTML page using CSS (Cascading Style Sheets) and XSL (Extensible Stylesheet Language).

To begin, let's return to the original sample XML file. When previewing the XML in a browser, the file displays just a list of element tags and data. This is not very practical for reading text online. One option that you have is to use CSS to format the data. As a standard practice, CSS is not the preferred method for styling XML data according to the W3C standards, but it can work. Going back to the sample file, I created a link to an external CSS file:

<?xml-stylesheet type="text/css" href="kp_xml_styles.css"?>

Next, I created a CSS file that has the same file name as declared in the XML document. In the first lines of the CSS document, I inserted comments describing the purpose of the file. Then, I wrote declarations for each element in the XML file. Instead of using a pound sign (#) or period (.) to represent an id or class, you just write the name of the element, and two curly brackets to enclose the CSS tags. You can see how display and font declarations are used to control how each element is displayed.

I also made a few changes in the XML tags to incorporate more specific page design for the CSS. Under <version> there is now a <date> element, matching the date style in the CSS.

XML Date

Also, I wanted to add a headline and logo to the page, so I have a couple options available. I used CSS to position a logo at the top right of the page, then I included a headline style for the title. After refreshing in the browser, the new page layout looked like this:

XML CSS Headline

Once the basic formating is done, I need to add some links to my articles. To accomplish this, I needed to incorporate hyperlinks in the text. You can't use <a href > tags in XML like HTML. Instead, you use a linking language called XLink. To use the XLink tags, you first need to attach a namespace to your document. A namespace is a pre-defined collection of elements and attributes that are created by a DTD or schema. Last month, I discussed how to make your own DTDs and schema from scratch, but you can use existing namespaces from the W3C. In line 8 of the XML document, I declared the XLink namespace for the document like this:

<newsletter xmlns:xlink="http://www.w3.org/1999/xlink">

Notice that I added this declaration within the first XML tag of the document. This applies the XLink namespace to all subsequent tags within the <newsletter> root element. Next, I need to integrate the actual hyperlinks. Within the element tag that you want the text to be linked, you need to include the following XLink attributes: xlink:type, xlink:href and xlink:show. In the example, I have added these tags to the <articletitle> element to attach the article page to the name. The xlink:type is marked as "simple" to identify this as a basic two-way link. The xlink:href contains the actual URL of the page, and xlink:show works similar to the HTML target="_blank" attribute in the <a href> tag to open a new window. See the code sample and the final result:

<articletitle xlink:type="simple" 
07_newsletters/1207/30_second_review.html" xlink:show="new">
Geek Gifts Under &#36;30</articletitle>

XML With Links

Up to this point, I've covered how to change your XML document into a formatted page with CSS and XLinks. Now, it's time to take this a step further with XSL. XSL allows you to create a template to style your data using an XML Path Language called XPath. It converts your XML document into XHTML. Based on the element name, you can design a custom format for a particular set of data from each tag.

First, you need to add the declaration in your XML file to link to the XSL stylesheet:

<?xml-stylesheet type="text/xsl" href="yourtemplatename.xsl"?>

To start your XSL file, create a new XML file with the following:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
<xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>

<xsl:template match="/">

  <!-- Content goes here -->


The <xsl:stylesheet ...> element defines the namespace while <xsl:output ...> defines the type of output as HTML. The <xls:template match="/"> element applies rules for the entire XML document.

To style the sample XML document, I began composing the HTML document in the content area as normal. I used a simple table to organize the data versus a block list like the CSS specification. Once that was complete, I needed to call my XML data into the template in order to flow into the appropriate table cell, so I need to itemize the data so that there is a single date above each section and article title. To separate the dates, I added a new declaration to structure each date individually based on the <version> tag.

<xsl:for-each select="newsletter/articles/version">

I also needed to make a change in the original XML file to make a separate instance of each article. To do this, I changed the XML tags for section and articletitle to section1, 2, 3 and articletitle1, 2, 3 respectively. Going over to the XSL template again, I added a declaration within each table cell to import the data. The notation for this is:

 <xsl:value-of  select="section1"/>

The XSL template will match any tag with the name <section1> to fill into that table cell. I continued to add the "value-of" declarations for each section and articletitle to complete the table. Note: The <xsl:value-of select=" "> doesn't need an end tag unlike <xsl:for-each select=" ">, </xsl:template> and </xsl:stylesheet>. Your HTML tags also need to be closed with the proper notation.

To view the basic page layout, I added a border to the table to view the structure as shown in the screenshot. The only thing left is to format the data for each cell.


Next month I will go in more detail on how to use XSL formatting and other applications of XML. Until then, happy coding.

XML Problem Design Solution
XSLT Developer's Guide

W3C, Extensible Markup Language (XML)
W3Schools, CSS tutorial
W3Schools, XSL tutorial
Von See, Chris, Keskar, Nitin. XSLT Developer's Guide. McGraw Hill/ Osborne. ISBN: 0072194081
Amiano, Mitch, D'Cruz, Conrad, Ethier, Kay, Thomas, Michael. XML: Problem - Design - Solution. Wiley. ISBN:0471791199

Get Random Access

Understanding Tech

Print this article

Shop Online


Your Name:

Your Email:

Your Friend's Name:

Your Friend's Email:

 © Micro Center