The first time you sign into developerWorks, a profile is created for you. Select information in your profile (name, country/region, and company) is displayed to the public and will accompany any content you post. You may update your IBM account at any time.

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 1: Use Cascading Stylesheets to display XML

Basic techniques to present XML in Web browsers

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 contact Mr. Ogbuji at uche.ogbuji@fourthought.com.

Summary: Cascading Stylesheets (CSS) are well known as the most standards-compliant means of manipulating the look of HTML Web pages. They also happen to be the most practical way of displaying XML in browsers. Browsers have included support for CSS applied to XML much longer than XSLT, and the CSS implementations are generally more complete and reliable. This tutorial shows how to use CSS to present XML in Web browsers.

View more content in this series

Date: 30 Nov 2004
Level: Introductory
PDF: A4 and Letter (1057 KB)Get Adobe® Reader®

Activity: 17060 views
Comments:

Tutorial introduction

Who should take this tutorial?

Most uses of XML eventually result in some sort of Web browser output. Today the most common approach to preparing information in XML for Web publishing is to use XSLT or a lower-level programming language to convert the XML to HTML. However, in some cases you can achieve easier XML Web publishing by using Cascading Stylesheets (CSS) to instruct Web browsers on how to directly display XML. CSS is best known as the recommended method for specifying the presentation of HTML, but recent versions also support XML, and have been embraced by browser vendors as the best-supported means of displaying XML.

Anyone who works with XML should take this tutorial. Even if CSS doesn't cover your needs for production Web publishing, it is a great tool for debugging and experimentation.

Prerequisites

This tutorial assumes knowledge of XML, and some basic knowledge of CSS. If you aren't familiar with XML, I recommend you first take the "Introduction to XML" tutorial here on developerWorks.

I recommend, but do not require, familiarity with XML Namespaces and XSLT. If you aren't familiar with XSLT, you might want to take the tutorial "Create multi-purpose Web content with XSLT," also here on developerWorks.

I highly recommend that you try out the examples. To do so you will need a Web browser that supports XML and CSS Level 2 or better. I present the output of all examples using Firefox 1.0 Preview Release on Linux. Firefox is the popular Web browser available on Windows, Mac OS X, Linux, and other platforms. It is based on Mozilla's rendering engine, which has always been known as a very CSS-compliant browser.

About the XML and 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 zip file, x-xmlcss-tutorial-files.zip (see Downloads). In this package, all files start with a prefix indicating the section that covers them and the order the examples appear within the section. For example, files from the first example in the third section are named starting with "eg_3_1".

Files with the .css extension are Cascading Stylesheets, and files with the .xml extension are sample XML documents that you can display using the CSS of the same prefix. All but one of the XML documents are in substance the same as eg_3_1.xml, but with different instructions for loading each CSS file.

I do list the example files in each panel, so you can easily locate and experiment with the examples as you take this tutorial.

Comments