- XML Reference Guide
- Overview
- What Is XML?
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- Table of Contents
- The Document Object Model
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- DOM and Java
- Informit Articles and Sample Chapters
- Books and e-Books
- Implementations
- DOM and JavaScript
- Using a Repeater
- Repeaters and XML
- Repeater Resources
- DOM and .NET
- Informit Articles and Sample Chapters
- Books and e-Books
- Documentation and Downloads
- DOM and C++
- DOM and C++ Resources
- DOM and Perl
- DOM and Perl Resources
- DOM and PHP
- DOM and PHP Resources
- DOM Level 3
- DOM Level 3 Core
- DOM Level 3 Load and Save
- DOM Level 3 XPath
- DOM Level 3 Validation
- Informit Articles and Sample Chapters
- Books and e-Books
- Documentation and Implementations
- The Simple API for XML (SAX)
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- SAX and Java
- Informit Articles and Sample Chapters
- Books and e-Books
- SAX and .NET
- Informit Articles and Sample Chapters
- SAX and Perl
- SAX and Perl Resources
- SAX and PHP
- SAX and PHP Resources
- Validation
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- Document Type Definitions (DTDs)
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- XML Schemas
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- RELAX NG
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- Schematron
- Official Documentation and Implementations
- Validation in Applications
- Informit Articles and Sample Chapters
- Books and e-Books
- XSL Transformations (XSLT)
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- XSLT in Java
- Java in XSLT Resources
- XSLT and RSS in .NET
- XSLT and RSS in .NET Resources
- XSL-FO
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- XPath
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- XML Base
- Informit Articles and Sample Chapters
- Official Documentation
- XHTML
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- XHTML 2.0
- Documentation
- Cascading Style Sheets
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- XUL
- XUL References
- XML Events
- XML Events Resources
- XML Data Binding
- Informit Articles and Sample Chapters
- Books and e-Books
- Specifications
- Implementations
- XML and Databases
- Informit Articles and Sample Chapters
- Books and e-Books
- Online Resources
- Official Documentation
- SQL Server and FOR XML
- Informit Articles and Sample Chapters
- Books and e-Books
- Documentation and Implementations
- Service Oriented Architecture
- Web Services
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- Creating a Perl Web Service Client
- SOAP::Lite
- Amazon Web Services
- Creating the Movable Type Plug-in
- Perl, Amazon, and Movable Type Resources
- Apache Axis2
- REST
- REST Resources
- SOAP
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- SOAP and Java
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- WSDL
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- UDDI
- UDDI Resources
- XML-RPC
- XML-RPC in PHP
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- Ajax
- Asynchronous Javascript
- Client-side XSLT
- SAJAX and PHP
- Ajax Resources
- JSON
- Ruby on Rails
- Creating Objects
- Ruby Basics: Arrays and Other Sundry Bits
- Ruby Basics: Iterators and Persistence
- Starting on the Rails
- Rails and Databases
- Rails: Ajax and Partials
- Rails Resources
- Web Services Security
- Web Services Security Resources
- SAML
- Informit Articles and Sample Chapters
- Books and e-Books
- Specification and Implementation
- XML Digital Signatures
- XML Digital Signatures Resources
- XML Key Management Services
- Resources for XML Key Management Services
- Internationalization
- Resources
- Grid Computing
- Grid Resources
- Web Services Resource Framework
- Web Services Resource Framework Resources
- WS-Addressing
- WS-Addressing Resources
- WS-Notifications
- New Languages: XML in Use
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- Google Web Toolkit
- GWT Basic Interactivity
- Google Sitemaps
- Google Sitemaps Resources
- Accessibility
- Web Accessibility
- XML Accessibility
- Accessibility Resources
- The Semantic Web
- Defining a New Ontology
- OWL: Web Ontology Language
- Semantic Web Resources
- Google Base
- Microformats
- StructuredBlogging
- Live Clipboard
- WML
- XHTML-MP
- WML Resources
- Google Web Services
- Google Web Services API
- Google Web Services Resources
- The Yahoo! Web Services Interface
- Yahoo! Web Services and PHP
- Yahoo! Web Services Resources
- eBay REST API
- WordML
- WordML Part 2: Lists
- WordML Part 3: Tables
- WordML Resources
- DocBook
- Articles
- Books and e-Books
- Official Documentation and Implementations
- XML Query
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- XForms
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- Resource Description Framework (RDF)
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- Topic Maps
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation, Implementations, and Other Resources
- Rich Site Summary (RSS)
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- Simple Sharing Extensions (SSE)
- Atom
- Podcasting
- Podcasting Resources
- Scalable Vector Graphics (SVG)
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- OPML
- OPML Resources
- Summary
- Projects
- JavaScript TimeTracker: JSON and PHP
- The Javascript Timetracker
- Refactoring to Javascript Objects
- Creating the Yahoo! Widget
- Web Mashup
- Google Maps
- Indeed Mashup
- Mashup Part 3: Putting It All Together
- Additional Resources
- Frequently Asked Questions About XML
- What's XML, and why should I use it?
- What's a well-formed document?
- What's the difference between XML and HTML?
- What's the difference between HTML and XHTML?
- Can I use XML in a browser?
- Should I use elements or attributes for my document?
- What's a namespace?
- Where can I get an XML parser?
- What's the difference between a well-formed document and a valid document?
- What's a validating parser?
- Should I use DOM or SAX for my application?
- How can I stop a SAX parser before it has parsed the entire document?
- 2005 Predictions
- 2006 Predictions
- Nick's Book Picks
Cascading Style Sheets, or CSS, are typically used in the HTML environment, but they are also a great way to control the presentation of XML data. Unlike XSL-FO, which also controls presentation, CSS provides a way to specify presentation outside the environment of the XML itself, so it's a great tool for standardizing the look and feel of information. But let's start at the beginning.
If I were building an HTML page, I could easily specify a section that includes a headline and some other text:
<html> <head><title>Chaos Magnet</title></head> <body> <div> <h1>Chaos Magnet</h1> <p>Murphy never had it like this.</p> </div> </body> </html>
Because this is standard HTML, the browser knows that each element has certain properties. For example, both h1 and p are block elements, meaning that each is displayed on its own line, even though the HTML shows them on the same line. Also, h1 has inherent font-size and font-weight properties that tell the browser to display it as large, bold text.
In addition to these inherent properties, we can set additional properties. For example, we can add a border to the div and change the font and color of the heading:
<html> <head><title>Chaos Magnet</title></head> <body> <div style="border: 1px solid black; padding: 10px;"> <h1 style="color: red; font-family: arial;">Chaos Magnet</h1> <p style="font-family: arial;">Murphy never had it like this.</p> </div> </body> </html>
Of course, that can get kind of messy, particularly if we have more than one of any particular tag. Can you imagine trying to change the look-and-feel of a website when you have to manually change the style attribute on every single element? Fortunately, you can, instead, specify style information separately:
<html> <head><title>Chaos Magnet</title> <style type="text/css"> * { font-family: arial } h1 { color: red } div { border: 1px solid black; padding: 10px; } </style> </head> <body> <div> <h1>Chaos Magnet</h1> <p>Murphy never had it like this.</p> </div> </body> </html>
Each style consists of two pieces of information: the selector and the directive. The selector tells the browser what information should be effected by the change. For example, only h1 elements should be red, so we used the h1 selector. On the other hand, we wanted all text to use the Arial font, so we used *, the so-called "universal selector."
The information in the brackets after the selector is one or more directives. These directives consist of a property to set (such as the color) and the value to set it to (such as red). Note that elements can be effected by more than one rule. The h1 element is red, but it's also Arial.
So what does all of this have to do with XML? Well, for one thing, we can also use CSS to control the presentation of straight XML in the browser. This means that instead of using HTML-specific elements, we could create a document that's more descriptive:
<document> <blogtitle>Chaos Magnet</blogtitle> <description>Murphy never had it like this.</description> </document>
If we try to show this document in the browser "as-is," the browser doesn't have any information on presentation, because these are not recognized elements. Most modern browsers just display some version of the document tree:
To add style information, we can use a processing instruction to specify a style sheet, just as we would normally add an XSLT style sheet:
<?xml-stylesheet type="text/css" href="blogstyles.css"?> <document> <blogtitle>Chaos Magnet</blogtitle> <description>Murphy never had it like this.</description> </document>
Notice that the type is text/css rather than text/xsl, as it is with an XSLT style sheet. From here, we can create a style sheet that duplicates our original HTML page:
* { font-family: arial } blogtitle { display: block; color: red; font-size: 24pt; font-weight: bold; margin-top: 25px; margin-bottom: 25px; } blogdescription { display: block; } document { display: block; border: 1px solid black; padding: 10px; margin: 10px; }
Notice that we had to add more information than we did for the HTML tags, because there are no pre-determined properties that the browser recognizes.
That covers the basics. For more information on the various types of selectors (such as attributes, siblings, classes, and so on) and the dozens of available properties, see the official documentation or these InformIT articles.