XML and CSS

We now turn to how XML and CSS can be used together. There are basically two ways: CSS can be used with Web languages that are written in XML or CSS can be used to display documents that are written only in XML. The best example of a Web language that is written in XML is XHTML, which is a cousin of HTML. XHTML imposes a few restrictions on how tags and attributes are written, but otherwise looks the same as traditional HTML documents.

The other way to use XML and CSS together is to combine a CSS style sheet with a document that's written only in XML. For example, the following document is an XML document written in a (hypothetical) format for aircraft maintenance manuals:

 <manual>   <aircraft>     <brand>Boeing</brand>     <type>747</type>   </aircraft>   <date>8 June 1998</date>   <chapter type="main">     <par>  Wipe the aircraft regularly     with a soft cloth.    </par>   </chapter> </manual> 

It has none of the familiar HTML elements, but other than that, it doesn't look too strange. A simple style sheet for this document may be as follows:

 manual {display: block; margin-left: 10%} aircraft {display: block: margin: 2em;   font-size: xx-large} chapter {display: block; margin-top: 1em} date, par {display: block} 

Inheritance works like in HTML. So, in the example, the brand element will be xx-large because it inherits the font size from the aircraft element.

In most of the examples in this book, we have written the selectors of style rules in capitals because in HTML, lowercase and uppercase letters are interchangeable. XML is different in that respect. A style sheet for an XML-based document must use selectors with exactly the same letters as the elements in the document. Spelling "manual" as "MANUAL" does not work.