11.0 Introduction

The idea behind Cascading Style Sheets (CSS) is quite simple: separate the content from rules that govern how the content lays out on the page. In these days of specialization within web site authoring groups, writers can write and designers can design without stepping on each other's toes. There is perhaps an even simpler practical side as well. Rather than place design properties in HTML tags scattered around a document (or web site), the properties can be defined in just one place and automatically applied to every chunk of content that looks to the design rules for rendering instructions.

CSS is an evolving standard. It began with Level 1, which was partially implemented in Internet Explorer 3 and more fully in Internet Explorer 4 and Navigator 4. An extension to CSS, called CSS-Positioning, presented a standard for specifying the precise location of an element on the page (see Chapter 13). CSS and CSS-P were combined along with many new style facilities in CSS Level 2, which is implemented in varying stages of completeness starting with IE 5, Netscape 6, and Opera 5.

11.0.1 Adding Styles to a Document

You have three ways to embed style sheet rules into a document:

With the <style> tag
Via the style attribute in an element
By importing them from an external file (see Recipe 11.4)

The <style> tag requires you to specify the MIME type of the CSS source code you are using. These days, all style sheets use the standard CSS syntax, whose MIME type is text/css. Because older browsers do not recognize the <style> tags, they render the style sheet rules as body content unless you wrap these rules inside HTML comment tags. Thus, the format for any <style> tag set should be as follows:

<style type="text/css">
<!--
one or more rules here
-->
</style

While the syntax of style sheet rules lets you apply a rule to one or more elements, you also have the option of applying a style to a single element by including the style attribute in the element's tag. The value of the style attribute is a string of style property/value pairs in a format that differs from typical HTML attribute assignments.

Some page authors use the <style> tag technique exclusively, while other authors may use a combination of approaches. The former is easier to maintain over time, while the latter is more convenient during an ad-hoc authoring session. But if you intend to apply a style to lots of pages, importing a style sheet (Recipe 11.4) is the way to go.

11.0.2 Style Sheet Rule Syntax

When you define a style sheet rule within a <style> tag set, you must designate the recipient of the rule and the rule's properties. The recipient is designated by a selector, which may be an element tag name, an element class attribute value, or an element id attribute value. The style properties are placed inside curly braces according to the following schema:

selector {property1:value1; property2:value2; ...}

If the selector is a tag name, that name stands by itself:

h2 {property1:value1; property2:value2; ...}

Style property names are case-insensitive (although I tend to write them as all lowercase). Values typically do not need to be quoted unless a single value consists of more than one word. A colon (plus an optional space) separates the property name from its value. If two or more property/value pairs inhabit the rule, they are separated from each other by a semicolon (and an optional space).

When the style sheet rule is assigned via the style attribute within an element tag, the value of the attribute is a string of the property/value pairs that otherwise appear inside the curly braces of a <style> tag set, but without the curly braces in this case:

<h2 style="property1:value1; property2:value2; ...">...</h2>

Each property accepts specific types of values tailored for the property. Many properties specify a physical measurement of some kind on the page. You should always include the measurement unit along with the numeric value. For example, if you want to set the font size of a paragraph to 14-point, the style rule looks like the following:

p {font-size:14pt}

Values are also commonly constant values. For example, to set the font style of a paragraph to italic, assign the italic value to the font-style property, as follows:

p {font-style:italic}

If a property accepts more than one value, the values should be comma-delimited, although space delimiting also works for some shortcut properties, such as border and font. For example, you can set many individual font properties via the shortcut font property and a space-delimited series of values for each of the specific properties:

p {font:12pt sans-serif bolder}

The browser knows how to parcel out the values to the individual implied properties because each value is acceptable by one specific font-related property only.

11.0.3 The Cascade and Specificity

CSS-enabled browsers follow well-defined guidelines for applying style sheets that appear in many places in a document. You may also see conflicting rules being applied to the same element. The cascade guidelines help the browser know which style definition to apply to each element.

At the root of the cascade guidelines is the fact that the more specifically a style sheet rule points to one element among all the elements on the page, the higher the priority that rule has for the element. For example, if you assign a style rule to all p elements on a page in the <style> tag and also assign a further (or conflicting) rule to one p element in its style attribute, any conflicts are settled in favor of the rule within the element's own style attribute. Unconflicting style properties from the more general rule are still applied to the p element (that is, global rules are inherited by an individual element, but an inherited rule can also be overridden with that element).

Additional details about Cascading Style Sheets and specificity guidelines can be found in Dynamic HTML: The Definitive Reference (O'Reilly).