 |  |
Chapter 12. Cascading Style Sheets (CSS)
Contents:
The Three Levels of CSS
CSS Syntax
Associating Stylesheets with XML Documents
Selectors
The Display Property
Pixels, Points, Picas, and Other Units of Length
Font Properties
Text Properties
Colors
The names of most elements describe the semantic meaning of the content they contain. However, ultimately this content needs to be formatted and displayed to users. For this to occur, there must be a step where formatting information is applied to the XML document and the semantic markup is transformed into presentational markup. There are a variety of choices for the syntax of this presentation layer. However, two are particularly noteworthy:
CSS is a non-XML syntax for describing the appearance of particular elements in a document. CSS is a very straight-forward language. No transformation is performed. The parsed character data of the document is presented more or less exactly as it appears in the XML document, though of course you can always transform the document with XSLT and then apply a CSS stylesheet to it if you need to rearrange the content of a document before showing it to the user. A CSS stylesheet does not change the markup of an XML document at all; it merely applies styles to the content that already exists.
By way of contrast, XSL-FO is a complete XML application for describing the layout of text on a page. It has elements that represent pages, blocks of text on the pages, graphics, horizontal rules, and more. You do not normally work with this application directly. Instead, you write an XSLT stylesheet that transforms your document's native markup into XSL-FO. The application rendering the document reads the XSL-FO and displays it to the user.
In this and the next chapter, we'll demonstrate the features of the two major stylesheet languages by applying them to the simple well-formed XML document shown in Example 12-1. This document does not have a document type declaration and is not valid, though a DTD or schema could be added easily enough. In general, DTDs and schemas don't have any impact on stylesheets, except insofar as they change the document content through entity declarations, default attribute values, and the like.
Example 12-1. Marjorie Anderson's recipe for Southern Corn Bread
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<?xml-stylesheet type="text/css" href="recipe.css"?>
<recipe source="Marjorie Anderson">
<dish>Southern Corn Bread</dish>
<ingredients>
<ingredient>
<quantity>1 cup</quantity>
<component>flour</component>
</ingredient>
<ingredient>
<quantity>4 tablespoons</quantity>
<component>Royal Baking Powder</component>
</ingredient>
<ingredient>
<quantity>1/2 teaspoon</quantity>
<component>salt</component>
</ingredient>
<ingredient>
<quantity>1 cup</quantity>
<component>corn meal</component>
</ingredient>
<ingredient>
<quantity>11/2 cups</quantity>
<component>whole milk</component>
</ingredient>
<ingredient>
<quantity>4 tablespoons</quantity>
<component>melted butter</component>
</ingredient>
</ingredients>
<directions>
<step>Sift flour, baking powder, sugar & salt together.</step>
<step>Add 1 cup corn meal.</step>
<step>
Beat egg in cup and add beaten egg and 11/2 cups whole
milk to make a batter. Stir well.
</step>
<step>
Add melted shortening and beat until light and thoroughly mixed.
</step>
<step>
Pour into greased shallow pan or greased muffin rings.
</step>
<step>
Bake in hot oven at <temperature>425º F</temperature> for
<duration>25 minutes</duration>.
</step>
<step optional="yes">
Cut into squares if cooked in shallow pan.
</step>
</directions>
<story>
After my mother-in-law <person>Marjorie Anderson</person> died,
Beth and I found this recipe written on the "extra recipes"
page in a local cookbook in her cupboard.
This was published by The Episcopal Churchwomen,
Church of Ascension, <city>Mt. Sterling</city>,
<state>Kentucky</state>.
</story>
</recipe>12.1. The Three Levels of CSS
At the time of this writing, there are three versions of CSS. CSS Level 1 was an early W3C Recommendation from 1996 for HTML only, though the extension to XML was obvious. The CSS Level 1 specification was incomplete and led to inconsistent browser implementations.
CSS Level 2 is the current recommendation and the version of CSS on which this chapter focuses. CSS Level 2 places XML on an equal footing with HTML. Indeed, CSS Level 2 often works better with XML than with HTML because CSS styles don't have to interact with any predefined rendering semantics. For the most part, CSS Level 2 is a superset of CSS Level 1. That is, all CSS Level 1 stylesheets are also CSS Level 2 stylesheets that mean pretty much the same thing.
The W3C is now working on CSS Level 3. When complete, it will modularize the CSS specification so software can implement particular subsets of CSS functionality without having to implement everything. For instance, an audio browser could implement audio stylesheets but ignore the visual formatting model. Furthermore, CSS Level 3 adds a number of features to CSS, including multi-column layouts, better support for non-Western languages, such as Arabic and Chinese, XML namespace support, more powerful selectors, paged media, and more. However, CSS Level 3 is not yet implemented by any browsers.
|  | |
| 11.7. Ranges |  | 12.2. CSS Syntax |
Copyright © 2002 O'Reilly & Associates. All rights reserved.