Chapter 3

A CSS Primer

"At the moment, there is no more profound expression of the power of XML and CSS combined." -Eric Meyer, "What Makes CSS So Great", The O'Reilly Network, 7/21/2000, http://www.oreillynet.com/pub/a/network/2000/07/21/magazine/css_intro.html, referring to the implementation of the Mozilla browser.

XML is designed to separate a document's data content from the way it is displayed. Because of this, there are mechanisms for displaying the presentation of the XML document--style sheets. Two types of style sheet languages are available for displaying XML: eXtensible Stylesheet Language (XSL) and Cascading Style Sheets (CSS). Because the World Wide Web Consortium (W3C) developed both languages, there is sometimes a bit of confusion about their uses.

XSL is a language for transforming XML into new XML documents--XSL Transformations (XSLT)--and provides an XML vocabulary for formatting objects. An XSL processor takes a two-phase approach, first transforming a source document into a new tree and then applying formatting style rules to the resulting document. [i] XSL is a very powerful and complex language, and is being developed by the W3C in two different drafts: XSL (for formatting) and XSLT (for transformations). CSS is a much simpler language, and is only used for formatting the display of HTML and XML document elements. A CSS processor traverses a document tree and adds styles to each element in the tree. This chapter will focus on CSS because it is the style sheet language that is used for formatting properties of XUL elements.

CSS version 1 (CSS1) was introduced as a W3C Recommendation in 1996 to enhance the presentation of HTML documents without adding new tags to the HTML language. Without style sheets, web authoring was difficult because there were so many versions of the same HTML code--Netscape, Microsoft, frames, text-only. Web authors struggled to resolve content vs. design issues by maintaining multiple versions of the same HTML documents. CSS allows authors to override existing style properties rendered by HTML browsers and give pages a unique and consistent design. In both HTML and XML, Cascading Style Sheets allow the web designer to separate text content and style by assigning different style rules to individual elements in a document in a style sheet. The rendering application--sometimes referred to as the "browser", "user agent", or "rendering agent"--follows or "cascades" through these style rules, and must use the style that is given priority according to the CSS Specification.

As you can imagine, Cascading Style Sheets play a major role in XUL. Since the goal of XUL is to provide a language that describes user interfaces, there is an enormous benefit to using style sheets to describe the style of elements in a user interface. This chapter is a primer chapter on CSS, and it will cover many of the basic concepts of CSS - syntax, selector types, different types of CSS properties, and how developers can apply CSS rules. At the end of this chapter, we will briefly focus on how CSS is used with XUL. For those of you already familiar with CSS, you should know that it is used in XUL the same way that HTML or XML uses CSS, and these style sheets are used extensively in XUL. By the end of this chapter, you will be ready to apply CSS rules to the XUL language.