XML Tutorial 5: Working with Cascading Style Sheets

Formatting Your XML Documents with CSS

Additional Topics

• Working with XML and CSS in XML Spy
• Netscape Support for XML and CSS
• Using Inline Styles with XML
• Style Sheet Media
• Alternate Style Sheets

Working with XML and CSS in XML Spy

If you want to work on the documents in Tutorial 5 using the supplied XML Spy software, you can do so by opening both the XML document and the CSS file in XML Spy text editor. To view the results of applying a Cascading Style Sheet to an XML document, select the document pane containing the XML document and click the Browser View button on the toolbar. XML Spy will display the XML document with the CSS styles applied to the document elements. Note that to use this approach, you must have Microsoft Internet Explorer 5 or higher installed.

Netscape Support for XML and CSS

To do the assignments in this tutorial, you will need to be using Internet Explorer 5.0 or above. The tasks cannot be successfully completed using Netscape 4, 6, or 7. Netscape fails to successfully apply the following styles to the XML elements in this tutorial:

• width
• text-align
• background-image

The completed tutorial case appears in Internet Explorer as:

The completed tutorial case appears in Netscape 7.0 as:

If you wish to use Netscape when applying CSS to your XML documents, you will have to avoid those styles that are not supported by Netscape with respect to XML.

Using Inline Styles with XML

Internet Explorer allows you to apply inline styles to your XML elements. To apply an inline style, use the syntax:

<element style="declarations"> ... </element>

where element is the name of the XML element and declarations are the CSS styles you want to apply to the element. For example to change the font of the City Cruiser 100 in the tutorial case to a 10-point red, change code for this element to:

<Name style="color:red; font-size:10pt">
City Cruiser 100
</Name>

Note that individual style declarations have to be separated by semi-colons. Also, this technique will work with Internet Explorer, but not with Netscape.

Style Sheet Media

Style sheets can be designed for a wide variety of media from computer screens to audio presentations to Braille printouts. To specify the media type of a style sheet add the media attribute to the <?xml-stylesheet> tag as follows:

<?xml-stylesheet media="type">

where type is one of the following:

• all - for all media types
• aural - for an audio presentation
• screen - for a computer screen
• tv - for a television screen
• projection - for a projection device
• handheld - for a handheld device
• print - for printed output
• braille - for Braille output
• tty - for teletype output

The default is "all".

Alternate Style Sheets

If you want to apply different style sheets to the same XML document, you can do so by using the alternate attribute in the <?xml-stylesheet> tag. The syntax is as follows:

<?xml-stylesheet alternate="yes | no">

where a "no" value for the alternate attribute indicates that the attached style sheet is the primary style sheet for the document and a "yes" value indicates that the style sheet is an alternate. If the style sheet is primary, it is automatically applied to the document, if a style sheet is an alternate, it is only applied manually by the user. Currently this option is not supported by Web browsers, but it may be supported by other user agents.