Style Sheets and XHTML

French | Spanish | Portuguese | Italian | German | Japanese | Chinese | Korean | Russian | Arabic

Cascading Style Sheets (CSS) is an enormously powerful tool that has been slow to catch on in the HTML development world. Whether or not you use (or like) CSS, the continuing evolution of CSS is deeply intertwined with the work moving forward on XHTML so learning about CSS can help you understand XHTML as well as implement it. Fortunately, CSS isn't very difficult once you master a few key structures and learn to apply its vocabulary. There are some real problems with existing CSS implementations that I cover later in this article, but future XHTML work probably should make as much use of CSS as possible.

Note Cascading style sheets is an enormous specification in itself, worth a article or three on its own. This article gets you started in CSS, but you'll want to find additional information if you move into CSS in a big way. The latest information on cascading style sheets from the W3C is available at http://www.w3.org/Style/CSS/. The discussions in this article focus on CSS Level 1 and CSS Level 2, both of which are stable as paper specifications if not completely implemented. The ongoing development of CSS Level 3 is likely to bring some significant changes to the XHTML landscape, and is definitely worth following. For a current list of CSS work, see http://www.w3.org/Style/CSS/current-work.

Separating Format from Content

CSS was one of the W3C's earliest efforts at separating formatting information from document structure in HTML. This recurring theme has been at the heart of most W3C HTML activity since HTML 4.0's start, and CSS is a critical ingredient in implementing that project. By providing a simple set of tools that exercise much more thorough control over presentation than HTML itself, CSS was supposed to lure developers away from the millions of FONT tags used in HTML documents. CSS is the carrot; HTML 4.0's (and XHTML's) deprecation of the FONT element is the stick. CSS offers document designers a number of key features that are nearly impossible to implement effectively with straight HTML (even if the FONT element is used). CSS also provides reusability. The formatting descriptions applied to documents can be applied to any document with the same vocabulary. CSS even lets you create style sheets that address particular situations within a given vocabulary, specifying formatting based on nested element structures or attribute values. You can make tens of thousands of HTML documents use the same formatting just by connecting one line of code in each document to the same CSS style sheet. This also makes it easy to change formatting across all of those documents because changes made to the master style sheet are reflected in all the documents that use it. Managing presentation is much simpler when all it takes is a change in a style sheet rather than a search-and-replace across thousands of documents.

Tip Keep your style sheet documents in a safe place! Any time your documents refer to a central style sheet, you can use that resource to modify the presentation for all your documents. It makes it easier for you to make the changes, but attackers potentially could modify the style sheet to graffiti your pages. See the first part of David Megginson's "When XML Gets Ugly" presentation at http://www.megginson.com/ugly/index.html for some of the attacks you should watch out for. Although a single master style sheet for a site is attractive, sometimes you need to change a presentation for a particular unit of an organization, a certain document, or even a certain element. The "cascade" in Cascading Style Sheets enables you to handle this problem easily without requiring constant cut-and-paste to create customized style sheets. Style sheets and documents can reference multiple style sheets, and CSS provides a set of rules for resolving where to use each style. HTML and XHTML provide extra hooks – the class and style attributes – for connecting style-based formatting to particular elements. (The hooks aren't as necessary in XML, where developers have more control over the vocabulary.) Cascading Style Sheets also enables designers to get out of the complex business of formatting HTML generated by server-side programs. Rather than having to edit templates filled with programming code, designers can agree with programmers on what the output of those programs should look like and then design style sheets to match without getting directly involved in the code. On the client side, CSS makes it easy for programmers to reach into the formatting created by document designers and change it when appropriate; thus, designers do not have to build styling specific to a page. While designers and programmers sometimes have to work closely together in both client- and server-side development (and sometimes they're the same person), CSS makes it easy to divide responsibilities cleanly. Finally – although this isn't implemented widely in browsers – CSS offers mechanisms that enable users to specify how content should be formatted. Combined with the emphasis on accessibility that has influenced much of the CSS process, this enables readers to access information in a format that's comfortable for them. Some readers need larger font sizes, while others just want to get the information in as compact a form as possible. Still other readers need aural (audio) presentation of the content – either because they can't see it or because, for instance, they're driving their cars and checking the news. Some designers grit their teeth at the prospect of users changing their carefully built designs, but for many users this critical issue determines the Web's usefulness for them.

The CSS Processing Model Cascading Style Sheets takes what is known as an annotative approach to formatting documents. Rather than convert one document into another (the transformative approach of XSL), CSS processors add the information from the style sheets into the structures' browsers and other tools used to present information. Like HTML, CSS assumes that the content contained within element structures is meant for display while attributes are meant to provide additional information that shouldn't be displayed directly as part of the text flow. Effectively, style sheet information is treated as additional markup, much like attributes, and primarily modifies the presentation of the information already in the document, not its content.

Tip CSS2 and CSS3 provide some simple tools for modifying content, but nothing complex or especially powerful, at least as compared to XSLT's transformation capabilities. CSS3 also provides tools for connecting scripts to elements through style sheets. Despite these extra tools, the preceding description holds very well for most current CSS activity. Cascading style sheets that deal with HTML or XHTML can build on the understandings browsers already have about the presentation semantics for the HTML vocabulary. H1 elements typically are rendered in larger type than H2 elements, LI elements are rendered as indented bulleted (or numbered, depending on context) list items, and so on. For HTML and XHTML, CSS enables designers to fine-tune those already understood rules. In some cases, CSS also enables designers to break the rules completely, using tricks such as CSS positioning to place content in particular locations on the screen or in a document window.

Tip For a clear picture of the "understood" presentation semantics of the HTML vocabulary, see the non-normative (effectively unofficial) style sheet in Appendix A of the CSS2 specification (http://www.w3.org/TR/REC-CSS2/sample.html). You also can use this style sheet to display XHTML documents in XML browsers that lack a clear understanding of the HTML vocabulary. It even includes rules for aural presentation! Because browsers already have rules for how they present HTML built into their code, designers can specify as much or as little formatting information as they like. Also, it's possible to create documents and style sheets that degrade gracefully. Browsers that don't understand CSS, or that only understand a portion of the CSS vocabulary used in a style sheet, are capable of presenting a basic view of the document to users. This is very useful when creating HTML documents that must be viewed on older browsers (the 3.x generation) or on text-only browsers such as Lynx. CSS style sheets are built out of lists of rules. While there are some hierarchies to these lists (more on this later in the article), the lists of rules generally are built out of two parts. The first part is the selector, which identifies to which elements a given rule applies. The second part, composed of properties, describes the formatting that a particular set of elements should receive. The general syntax looks like this:

   selector {propertyName1: propertyValue1;
   propertyName2: propertyValue2;
   etc...}
 

Using Selectors Cascading style sheets often are separate from the elements or even documents they format, so style sheets need to have a way of identifying which elements need which formatting. Selectors provide a flexible layer of abstraction that makes it easy to apply properties to individual element types, as well as groups and subsets of element types. Selectors describe the parts of a document that should receive particular formatting and they make it easy to create style sheets that work across a set of documents; they do not describe document structures in general. There are many different coding styles for selectors, all built on the same syntax. Repeated declarations within a style sheet using the same selector are perfectly acceptable, and multiple selectors can target the same element. Unlike XML document type definitions, there is no requirement that a given document conform to the structure described by a style sheet. If a selector is used that doesn't have a match in a given document, the rule is ignored. These fairly relaxed rules make it possible to create sophisticated style sheets that fit tightly across documents with extremely varied structures. The simplest selector is just an element name, indicating that all elements with that name should receive the styling properties specified in the braces:

   h1 {font-family:serif}

In this case, all h1 elements are rendered in the browser's default serif typeface – Times or Times New Roman, typically. If you want to apply the same properties to h1, h2, and h3 elements, you can write:

   h1 {font-family:serif}
   h2 {font-family:serif}
   h3 {font-family:serif}

Or, to reduce the size of this, you can take advantage of another feature of CSS selectors: commas. This single declaration has the same meaning as the three preceding declarations:

   h1, h2, h3 {font-family:serif}

If you want to specify particular formatting for elements that are contained by other elements, CSS selectors enable you to specify containment relationships. If, for example, you want the content of em elements to appear in a sans-serif typeface when used within unordered lists and in a serif typeface when used within ordered lists, you can use these two declarations:

   ul em {font-family:sans-serif}
   ol em {font-family:serif}

Because there isn't a comma, these selectors express containment. In CSS Level 2, you can tighten the focus slightly by specifying that rules apply only to direct children rather than just descendants. For example, if you want to create rules to format list items in a particular way for ordered and unordered lists, you can use:

   ul>li { properties }
   ol>li { properties }

If needed, you can use the asterisk (*) as a wildcard in place of an element name in any of the preceding declarations. Another common approach uses attribute values to select particular elements for styling. XHTML's class element was designed specifically for styling, enabling document authors to specify particular types within the generic HTML vocabulary. There are two ways to use class information. First, you can use class information in combination with element name information.

Caution No single browser currently supports the entire range of CSS1 and CSS2 selectors, but support is improving. Most Level 1 selectors are implemented, although older tools may not handle even all of Level 1. Check online for the latest information regarding implementation. Web Review maintains a chart at http://webreview.com/pub/guides/style/css2select.html. The W3C is developing even more selectors for CSS3. See http://www.w3.org/TR/CSS3- selectors for the latest developments, though it will be a long while before we see these new features in production browsers..