The first time you sign into developerWorks, a profile is created for you. Select information in your developerWorks profile is displayed to the public, but you may edit the information at any time. Your first name, last name (unless you choose to hide them), and display name will accompany the content that you post.

All information submitted is secure.

The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerworks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

All information submitted is secure.

My developerWorks:

My notifications:

Sign out

Select a language:

Display XML with Cascading Stylesheets, Part 3: Use Cascading Stylesheets to display XML

Combine XSLT and CSS to process XML

Uche Ogbuji (uche.ogbuji@fourthought.com), Principal consultant, Fourthought Inc.

Uche Ogbuji is a consultant and co-founder of Fourthought Inc., a software vendor and consultancy specializing in XML solutions for enterprise knowledge management. Fourthought develops 4Suite, an open source platform for XML, RDF, and knowledge-management applications. Mr. Ogbuji is also a lead developer of the Versa RDF query language. He is a computer engineer and writer born in Nigeria, living and working in Boulder, Colorado, USA. You can find out more about Mr. Ogbuji at his Weblog Copia, or contact him at uche.ogbuji@fourthought.com.

Summary: In parts 1 and 2 of this tutorial series, Uche Ogbuji has shown how to use Cascading Stylesheets (CSS) to display XML in browsers, presenting basic and advanced techniques. Although some people see XSLT and CSS as opposing technologies, they are actually very complementary. There are many XML rendering tasks that CSS cannot handle, and is not designed to handle. XSLT can be used for many such tasks, and can even be used to manage the CSS that is still used to fine-tune the presentation. This tutorial covers techniques for using XSLT to process XML in association with CSS.

View more content in this series

Tag this!

Date: 20 Jun 2005
Level: Intermediate
PDF: A4 and Letter (205 KB)Get Adobe® Reader®

Activity: 6366 views
Comments:

Tutorial introduction

CSS versus XSLT

In the previous tutorials in this series (Part 1 and Part 2), Uche Ogbuji showed how to use Cascading Stylesheets (CSS) to display XML in browsers, presenting basic techniques and advanced topics. Some discussions present XSLT and CSS as opposing technologies for presenting XML, but I find little reason to view them this way. Each one offers far more to complement than to counter the other.

This cooperation has many manifestations, but the most common is using XSLT to generate CSS and include it in the output. XSLT provides more algorithmic power than CSS, so these two technologies form a very rich combination. This tutorial builds on its predecessors to explore this combination.

Who should take this tutorial?

Much XML ultimately finds its way to Web browsers in one way or another. CSS is a great way to make XML presentable in browsers. CSS is best known as the recommended method for specifying the presentation of HTML, but recent versions also support XML; in fact, several browser vendors have embraced it as the best-supported means of displaying XML. CSS is also used in other XML vocabularies such as SVG and XForms.

XSLT is the most widely used means of manipulating XML. It can also be used for display presentation, but CSS is more often used for final browser display. XSLT is a very different approach -- more complex, but more powerful -- and it's supported by many of the browsers that also support CSS.

Anyone who works with XML should take this tutorial. Even if CSS and XSLT don't cover your needs for production Web publishing, they are great tools for general processing, debugging, and experimentation. They offer rich interaction with other XML technologies and you'll likely run into CSS and XSLT even when you least expect them.

Prerequisites

This tutorial assumes knowledge of XML, CSS, XPath, and XSLT. If you aren't familiar with these technologies, I recommend that you first take whichever of the following tutorials suits your needs:

"Introduction to XML"
"Use Cascading Stylesheets to display XML, Part 1" (introduces the use of CSS to style XML in browsers)
"Use Cascading Stylesheets to display XML, Part 2" (covers advanced topics for the use of CSS to style XML in browsers)
"Get started with XPath"
"Create multi-purpose Web content with XSLT"

I highly recommend that you try out the examples in this tutorial. Some are best checked out with a stand-alone XSLT processor. I use 4Suite 1.0b1. Some require a Web browser that supports XML, XSLT 1.0, and CSS Level 2 or better. When showing browser output examples I show screenshots of Firefox 1.0.4 on Fedora Core Linux. Firefox is a popular Web browser available on Windows, Mac OS X, Linux, and other platforms. It is based on Mozilla's rendering engine, which is a very CSS-compliant browser.

About the XML/CSS examples in this tutorial

In this tutorial you will see many examples of CSS files. All the files used in this tutorial are in the file x-xmlcss3-tutorial-files.zip (see Downloads). In this package, all files start with a prefix indicating what section they are covered in and what order of examples within the section. For example, files from the first example in the third section are named starting with "eg_3_1".

Files ending with .css are Cascading Stylesheets, files ending with .xsl are XSLT, and those ending in .xml are sample XML documents. The latter are to be processed, usually using XSLT of the same prefix. The various XML, CSS, and XSLT files do not always match. A few of the files use more specialized extensions, such as .svg for Scalable Vector Graphics.

I do take care to further list the example files in each panel and how each relates to the other, so if you follow along with the tutorial you should be able to locate and experiment with the examples easily enough.

Comments

Close [x]

Help: Update or add to My dW interests

What's this?

This little timesaver lets you update your My developerWorks profile with just one click! The general subject of this content (AIX and UNIX, Information Management, Lotus, Rational, Tivoli, WebSphere, Java, Linux, Open source, SOA and Web services, Web development, or XML) will be added to the interests section of your profile, if it's not there already. You only need to be logged in to My developerWorks.

And what's the point of adding your interests to your profile? That's how you find other users with the same interests as yours, and see what they're reading and contributing to the community. Your interests also help us recommend relevant developerWorks content to you.

View your My developerWorks profile

Return from help

Close [x]

Help: Remove from My dW interests

What's this?

Removing this interest does not alter your profile, but rather removes this piece of content from a list of all content for which you've indicated interest. In a future enhancement to My developerWorks, you'll be able to see a record of that content.

View your My developerWorks profile

Return from help

static.content.url=http://www.ibm.com/developerworks/js/artrating/

SITE_ID=1

Zone=XML

ArticleID=138505

TutorialTitle=Display XML with Cascading Stylesheets, Part 3: Use Cascading Stylesheets to display XML

publish-date=06202005

author1-email=uche.ogbuji@fourthought.com

author1-email-cc=dwxed@us.ibm.com