![Close [x]](http://dw1.s81c.com/i/c.gif){kind=small}
Introduction
In a previous tutorial, Uche Ogbuji showed how to use Cascading Stylesheets (CSS) to display XML in browsers, presenting basic techniques. However, as anyone who has tried to master CSS in the world of HTML and JavaScript can attest, you'll find numerous tricks, traps, and nuances. The same is true when using CSS with XML. You have to watch out for:
- Differences in compliance and rendering details across browsers
- Handling of different media such as aural (speech) and print
- Interaction with other browser and XML technologies such as XSLT and JavaScript
You may also be interested in matters such as:
- The use of CSS embedded in important XML vocabularies such as SVG
- Linking, forms, and other user interface features relating to browser styling
This tutorial builds on the basics in the earlier one to cover these intermediate and advanced topics.
Who should take this tutorial?
A lot of XML eventually finds it way to Web browsers in one way or another, and 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, and have been embraced by browser vendors as the best-supported means of displaying XML. CSS is also used in other XML vocabularies such as SVG and XForms.
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. It also has rich interaction with other XML technologies, and you are likely to run into CSS in many unexpected cases.
This tutorial assumes knowledge of XML, and some basic knowledge of CSS. If you aren't familiar with XML, I recommend that you first take the "Introduction to XML" tutorial here on developerWorks.
You should also be familiar with the use of CSS to style XML in browsers. To learn this, take the previous tutorial, "Use Cascading Stylesheets to display XML".
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 tutorial."
I highly recommend that you try out the examples in this tutorial. To do so you need a Web browser that supports XML and CSS Level 2 or better. Where applicable, I present the output of examples using Firefox 1.0 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 known to be a very CSS-compliant browser.
About the XML/CSS examples in this tutorial
In this tutorial you will see many examples of CSS files. You can find all the files used in this tutorial in the file, x-xmlcss2-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 file with the same prefix, if one is present. Some of the XML files are not associated with a matching CSS file; for example, they may demonstrate embedded CSS. A few of the files use more specialized extensions such as .svg for SVG files.
I do list the example files in each panel, so you can easily locate and experiment with the examples as you take this tutorial.
Table of contents
Local resources
Tags
Use the slider bar to see more or fewer tags.
Popular tags shows the top tags for this particular content zone (for example, Java technology, Linux, WebSphere).
My tags shows your tags for this particular content zone (for example, Java technology, Linux, WebSphere).
Popular tutorial tags |
My tutorial tagsSkip to tags list
Popular tutorial tags |
My tutorial tags
