Chapter 9. Cascading Style Sheets

If you want to display XML pages in a browser, you have 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 that 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 (http://classics.mit.edu/Antoninus/meditations.html):

<?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.

This chapter is all about fixing this situation by telling browsers exactly how to display the elements that 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 XML— in 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. What's more, in HTML, you're restricted to working with the predefined HTML elements, while in XML, you can style sophisticated nestings of elements and more.

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

The actual support that you'll find in browsers for CSS varies widely, as you might expect. The support in both Netscape 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, is apparently the first complete CSS1 browser). I can't stress this enough: Test your style sheets in as many browsers as you can because style sheet implementation varies a great deal from browser to browser.

Here are a few online CSS resources:

• The W3C CSS validator, located at http://jigsaw.w3.org/css-validator/, will check 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 http://www.w3.org/People/Raggett/tidy.

• Many CSS resources are available at the W3C CSS page, http://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 style sheets? A style sheet 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 that we've just seen uses <TITLE>, <AUTHOR>, <SECTION>, and <P> elements. In a style sheet, I can supply a rule for all 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 style sheet, style.css, for the XML document that we've already seen:

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 style sheet to the XML document that we saw at the beginning of this chapter? Take a look at the next section to find out.