Chapter 9. Cascading Style Sheets

If you want to display XML pages in a browser, you've got a problem: Unless the browser you're using can handle your XML markup (such as the Jumbo browser, which handles Chemical Markup Language), the best it can do is to display your document in some default way. For example, take a look at this document, which holds the beginning text of the stoic philosopher (and Roman emperor) Marcus Aurelius's The Meditations :

Listing ch09_01.xml

 <?xml version="1.0" standalone="yes"?> <DOCUMENT>     <TITLE>The Meditations</TITLE>     <AUTHOR>By Marcus Aurelius</AUTHOR>     <SECTION>Book One</SECTION>     <P>         From my grandfather, Verus, I learned good morals         and the government of my temper.     </P>     <P>         From the reputation and remembrance of my father,         modesty and a manly character.     </P>     <P>         From my mother, piety and beneficence, and abstinence,         not only from evil deeds, but even from evil         thoughts; and further, simplicity in my way of living,         far removed from the habits of the rich.     </P>     <P>         From my great-grandfather, not to have frequented         public schools, and to have had good teachers at home,         and to know that on such things a man should spend         freely.     </P> </DOCUMENT> 

Internet Explorer can display this document, but because it has no idea what you want to do with the various tags as far as presentation goes, it leaves them in, as you see in Figure 9-1.

Figure 9-1. Displaying an XML document in Internet Explorer.

This chapter is all about fixing this situation by telling browsers exactly how to display the elements you've created in a document. To do this, I'll use Cascading Style Sheets (CSS), which were first introduced in December 1996. CSS is now widely supported in the major browsers. Using CSS, you can specify exactly how you want your documents to appear in browsers. Although CSS was developed for use with HTML, it works with XMLin fact, it works even better with XML because there are some conflicts between CSS and HTML (such as the CSS nowrap specification and the HTML NOWRAP attribute) that XML doesn't have. Furthermore, in HTML, you're restricted to working with the predefined HTML elements, while in XML, you can style sophisticated nestings of elements and more.

There are two levels of CSS today, and they're both W3C specificationsCSS1 and CSS2. You'll find these specifications at www.w3.org/TR/REC-CSS1 and www.w3.org/TR/REC-CSS2. CSS2 includes all of CSS1 and adds some additional features, such as aural stylesheets, support for various media types, and other advanced features. In fact, CSS3 is under development, and you can read all about it at www.w3.org/Style/CSS/current-work.

The actual support you'll find in browsers for CSS varies widely, as you might expect. The support in both Netscape Navigator and Internet Explorer is good, although somewhat different, so some experimentation in both browsers is usually a good idea. In fact, until fairly recently, no browser even supported CSS1 completely (Internet Explorer 5.0 for the Macintosh shipped March 27, 2000, and is apparently the first complete CSS1 browser). I can't stress this enough: Test your stylesheets in as many browsers as you can because stylesheet implementation varies a great deal from browser to browser.

More on Stylesheets

Many more styles are found in CSS2such as aural stylesheetsthan I can include in this chapter. See www.w3.org/TR/REC-CSS2/ for the details.

Here are a few online CSS resources:

• The W3C CSS validator is at http:// jigsaw .w3.org/css-validator/. It checks the CSS in your pages for you.

• The W3C TIDY program can convert styles in HTML document to CSS for you. You can find TIDY at www.w3.org/People/Raggett/tidy.

• Many CSS resources are available at the W3C CSS page, www.w3.org/Style/CSS/, including CSS tutorials and links to free tools. If you will be using a lot of CSS, take a look at this page first.

So what are stylesheets? A stylesheet is a list of style rules, and it's attached to a document to indicate how you want the elements in the document displayed. For example, the document we've just seen uses <TITLE> , <AUTHOR> , <SECTION> , and <P> elements. In a stylesheet, I can supply a rule for all of these elements. A rule consists of a selector, which specifies what element or elements you want the rule to apply to, and the rule specification itself, which is enclosed in curly braces, { and } . Here's a sample stylesheet, ch09_02.css, for the XML document we've already seen:

Listing ch09_02.css

 TITLE {display: block; font-size: 24pt; font-weight: bold;     text-align: center; text-decoration: underline} AUTHOR {display: block; font-size: 18pt; font-weight: bold;     text-align: center} SECTION {display: block; font-size: 16pt; font-weight: bold;     text-align: center; font-style: italic} P {display: block; margin-top: 10} 

How do you attach this stylesheet to the XML document we saw at the beginning of this chapter? Take a look at the next section.