How can I style XML with CSS for viewing in a browser without first transforming to (X)HTML?

Question

I know that CSS can be used to control the presentation of (X)HTML in modern browsers. I was under the impression that this was possible for arbitrary XML as well. (Am I mistaken?)

A concrete example: given the following XML

<log>
  <entry revision="1">
    <author>J Random Hacker</author>
    <message>Some pithy explanation</message>
  </entry>
</log>

I'd like to associate a CSS with this XML such that when viewed in a modern (WebKit, FireFox) browser, I see something like:

+----------------------------------+
| revision | 1                     |
+----------------------------------+
| author   | J Random Hacker       |
+----------------------------------+
| message  | Some pithy explanation|
+----------------------------------+

Where my oh-so-beautiful ascii-art is meant to indicate some table-like layout.

That is: XML+CSS --> "pixels for user" instead of XML+XSLT --> XHTML+CSS --> "pixels for user".

My hope is that this approach could be simpler way (for me) to present XML documents that are already document-like in their structure. I'm also just plain curious.

Answer 1

It is indeed possible to use CSS to format an XML document.

W3 schools example

(The W3C do recommend using xslt to do this sort of thing instead CSS though)

Answer 2

yes it is possible. you simply write a rule for each element:

author{
   display:block;
   color:#888888;
}

etc.

Answer 3

According to the specification, CSS should work with XML documents as well as HTML documents. Instead of selecting common HTML elements in your CSS code, you select your own elements in the CSS file, such as:

entry {
    display: block;
}
author {
    display: inline;
    font-weight: bold;
}
...

You can associate the CSS file to your XML file by inserting a similar line of code into your XML file:

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