What Is CSS, Really?

CSS is simply a style language that allows you to describe how to define presentational aspects of a document. It is not a difficult language per se. But it is complex.

Note 

 The term style language refers broadly to any language that influences the presentational properties of documents. Think of style as any design characteristic: typeface, background, text, link colors, margin controls, and placement of objects on a page.

Now that you have learned a little about the history and rationale of markup in Chapter 1, “Understanding Structured Markup,” it’s time to discover what the concepts of CSS embrace in theory, and how that theory in turn becomes practice.

Status of CSS

CSS Level 1 (CSS1) first became a W3C recommendation in 1996. The CSS Level 2 (CSS2) specification, which is the one most authors and browsers are currently interested in using and supporting, became a World Wide Web Consortium (W3C) recommendation in 1998. It’s fascinating to think that CSS has been around in some form for quite a long time in web terms. But how frustrating to imagine that CSS, which has so much power and elegance, had to wait until the first part of this decade to even be considered for regular use.

CSS Level 3 (CSS3) is being developed. In its current draft form, CSS3 has been modularized in the sense that XHTML, too, has been modularized—that is, it’s broken up into grouped sections such as text, lists, tables, and so on. The CSS3 specification describes aspects of CSS by its natural modules: fonts, backgrounds, color, and so on.

Note 

 The original specification for CSS1 is at www.w3.org/TR/REC-CSS1-961217. That spec was revised in 1999; the revision is at www.w3.org/TR/REC-CSS1. If you’d like to read the current CSS 2 spec, you can do so at www.w3.org/TR/ REC-CSS2/. The CSS3 working draft is available at www.w3.org/TR/css3-roadmap/.

CSS can be used for HTML, XHTML, and XML documents. It’s also important to note that CSS is not the only style language available. The Extensible Style Language (XSL), and the Extensible Style Language with Transformations (XSLT), can both be used with XHTML and XML documents, but these languages work significantly differently from CSS and are beyond the scope of this book.

Note 

 XSLT is an extremely powerful tool that allows designers and developers to manipulate the structure of a document. This allows authors to transform XML (including XHTML) into other document formats, including HTML, XHTML, and even PDF. If you’re interested in XSLT, check out the XSLT working draft, www.w3.org/TR/xslt11/.

Principles of CSS

Just as with HTML and XHTML, CSS has a number of important principles. These principles were largely defined in CSS1, and CSS2 picks up on them as follows:

Compatibility The W3C created CSS to be both backward and forward compatible. Any browsers with CSS2 support should contain support for CSS1, and any browser with CSS1 support should read what it can of CSS2 style sheets and ignore what the browser doesn’t recognize.

Structured CSS should be based on the structure of the documents to which they are attached. This is why it was so critical to study and understand the structure of documents as you did in Chapter 1 prior to creating CSS documents. Changing a style sheet should have no actual impact on the markup and content structure, but of course it will impact the presentation of that document.

Vendor, device, and platform independence Both CSS as a language and the documents to which CSS extends are ideally independent of any vendor, device, or platform. This independence was an original reason that the Web and HTML were developed in the first place. Part of the challenge at this point is to regain this independence, because it frees us of the heavy multibrowser, multiplatform testing responsibilities we’ve endured these past years.

Improvement of document maintenance Web designers and developers can manage the presentation of their documents much more efficiently with CSS. One style sheet can style countless documents, so managing style within a site means editing that style sheet and not the numerous, individual documents with which it is integrated.

Simplicity The language of CSS is simplistic and human readable—it’s easy to understand just by looking at the code. CSS2 has turned out to be more complex than CSS1, and CSS3 will be even more complex than both, but there is a general goal to ensure that the properties within CSS are streamlined.

Performance Usually, the use of CSS will decrease the amount of overhead. Where previously you might have used complex tables and images to achieve layout, CSS will streamline your presentation as well as the number of requests sent to the server during an active session. Streamlining results in not only improved browser rendering of documents, but also better network performance.

Flexibility There are numerous ways to apply CSS, as you’ll see later in the “Integrating Style” section later this chapter. This flexibility in application gives you much more choice in terms of how you use style in a given environment.

Richness As all designers reading this book are aware, the need for rich visual alternatives when designing sites is imperative. CSS addresses many of these concerns by providing designers with a variety of means to express visual ideas in the most efficient and accurate way.

Binding to other technologies CSS can be used along with other technologies, such as JavaScript, and its meaning can be altered by such scripts. This provides even deeper control for authors and designers, and it offers a means of using CSS as part of dynamic content development.

Accessibility By successfully separating structure from presentation with style sheets, you automatically end up with a more accessible document because the remaining document is logical and free of complicated tables. Beyond that, CSS features help make web documents more accessible by controlling fonts, reducing confusing and problematic table layouts and single-pixel GIF images, and providing access to multiple media outputs such as aural and Braille (see the next section, “Applications of CSS”).

Certainly, realizing and furthering these goals depends on browser support. As with the goals of HTML and XHTML, these are ideals that, unfortunately, cannot always be reached due to the problems inherent to CSS support. As CSS support becomes more and more stable, the principles of CSS can be more readily achieved.

Important CSS Terms In order to follow the technical discussions in this book, it’s important to get a feel for the language used to describe aspects of CSS. These terms are laid out in the CSS specifications and have precise meanings, and it’s important to understand them before delving more deeply into the actual language.

Some of the terms most critical to this book include:

Style sheet A set of statements that describes the presentation of a given document. A valid style sheet must be written according to the grammar and rules of CSS; for example, a valid CSS2 sheet follows all the rules of the CSS2 specification. You’ll look at the validation process for style in Chapter 3, “Writing CSS.”

Source document, document The document or related documents to which a style sheet is applied. The document language refers to the language the document is written in, such as HTML, XHTML, or XML.

Element I discussed elements in detail in Chapter 1. An element is a tag or tagset and any of its related content. Elements in markup are critically important in CSS because they are the primary syntactical structure of the document language. As a result, you’ll build many of your style rules based on elements.

Attribute A value that is associated with an element and consists of an attribute name and value, such as align="right". Many attributes in markup are presentational and therefore ideally replaced with style sheets.

Content Any content that is associated with an element.

Document tree The tree of elements that evolves from the source document(s). An example of a simple document tree is in Chapter 1.

Canvas The area of the browser where the document is displayed.

Child A sub-element of a parent element.

Sibling An element that shares the same parent as another element.

User agent This is any program that interprets the document language and style sheet. A web browser, for example, is a user agent.

For more important CSS-related terminology, see www.w3.org/TR/REC-CSS2/ conform.html#q1 and www.w3.org/TR/REC-CSS1#terminology.

Applications of CSS

What’s especially interesting is that CSS is not reserved for use only in the web browser; it’s also used for a variety of media types. What’s more, you can define multiple style sheets so your page can be differently rendered depending upon the media in question.

Style sheets can in fact describe the presentation of a document for the following types of delivery:

Aural Aural CSS is built primarily for speech synthesizers used by those with blindness. Aural style sheets allow you to define various aspects of how the document will be read, such as the volume and voice characteristics to use.

Braille and embossed Braille These media types allows you to use CSS to define the presentation of a document for output to Braille devices and printers.

Handheld This media type is used when styling a document’s presentation in small devices such as PDAs, pagers, and cell phones.

Print Want your pages to look good in print as well as screen? Well, you can define print styles using the print media type to do just that.

Projection Styling documents for this media type allows authors to use their documents for projected presentations.

Screen The screen media type is for styling documents to appear onscreen.

TTY This media type is for use with devices having limited display features, such as teletype machines.

TV This media type is for television and related devices.

As with all aspects of CSS, if the browser doesn’t have support for a given media type, that feature can’t be used.

Now that you have an understanding of CSS’s principles and application and an awareness of important terms, it’s time to explore the various types of style sheets.