16.4. Rule Syntax Style sheets consist of one or more rules for describing how a page element should be displayed. The following example contains two rules. The first rule makes all the h1s in a document gray; the second specifies that paragraphs should be set in 12-pixel high Verdana or some sans-serif font: h1 {color: #eee;} p {font-size: 12px; font-family: Verdana, sans-serif; }
Figure 16-1 shows the components of a style sheet rule. The two main sections of a style sheet rule are the selector (which identifies the element to be styled) and the declaration (the style or display instructions to be applied to that element). In the previous sample code, the h1 and p elements are the selectors. The complete list of selectors in the CSS 2.1 specification is covered in Chapter 17. CSS History and Standards Development HTML was never intended to be a presentational language, so the idea of using separate style sheets with HTML documents (in the manner style sheets were used in desktop publishing) has been around since 1990 when the Web was just a twinkle in Tim Berners-Lee's eye. As early as 1993, before the release of the Mosaic browser, there were already several HTML style sheet proposals in circulation. Cascading Style Sheets as we know them got their start in 1994 when Håkon Lie published his first draft of Cascading HTML Style Sheets. He was quickly joined by Bert Bos, who had been working with a similar style sheet system for his Argo browser. What set their style sheet proposal apart was the notion that the system must strike a balance between author and reader style preferences and that it must have a mechanism for dealing with multiple style sheets and conflicting styles (thus, the "cascade," discussed in an upcoming section in this chapter). After presentations at WWW conferences and much lively discussion in the www-style mailing list, development of Cascading Style Sheets continued. In 1995 when the World Wide Web Consortium (W3C) became operational, an official working group dedicated to CSS was formed. By this time, "HTML" had been dropped from its title, because it was recognized early on that other languages would need a presentation language as well. The first formal CSS Recommendation was CSS Level 1, released in 1996, which contains all the basics for attaching font, color, and spacing instructions to elements on a page. The first browser to implement aspects of CSS 1 was Internet Explorer 3, followed soon after with a half-hearted effort to stay competitive by Netscape 4. CSS Level 2 was released in 1998. It is most notable for the addition of properties for positioning elements on the page (originally released as CSS-P, then later rolled into CSS Level 2), but it also introduced media types, table layout properties, aural style sheets, and more sophisticated methods for selecting elements, among other features. As of this writing, there are two other Recommendations in the works. CSS Level 2, Revision 1 is a working draft (downgraded from Candidate Recommendation) that makes minor adjustments to CSS2 based on experience working with it from 1998 to 2004. It fixes errors, deletes properties that were not adopted by the CSS community, and moves some unsupported features to the upcoming CSS 3 specification. The module-based CSS Level 3 Recommendation adds support for vertical flowing text, improved table handling, international languages, and better integration with other XML technologies such as SVG (Scalable Vector Graphics), MathML, and SMIL (Synchronized Multimedia Interchange Language). The W3C is also working on special CSS sets targeted to specific media such as CSS Mobile, CSS Print, and CSS TV. It is clear that CSS is an integrated part of the W3C's vision for the future of web content. To keep up to date with the W3C's CSS-related activities, visit www.w3.org/Style/CSS/. |
Figure 16-1. Parts of a style sheet rule 
The declaration is made up of a property and its value. The curly braces allow for multiple declarations, which make up a declaration block . A property is a stylistic parameter that can be defined , such as color, font-family, or line-height. Properties are separated from their values by the colon (:) character followed by a space. Style properties are the real meat of CSS; therefore, they are treated in detail in Chapters 18 through 23. A declaration may contain several property/value pairs. Multiple properties must be separated by semicolons (;), as shown in this example. p {font-size: 11px; font-weight: bold; color: #C06; }
Note that because CSS ignores whitespace and line returns, this same rule could be written like this to make the properties easier to find on the page. p { font-size: 11px; font-weight: bold; color: #C06; }
Technically, the last property in a declaration block does not require a semicolon, but developers usually include it anyway to make it easy to append the rule later. In addition, the inclusion of the trailing semicolon avoids a rare bug in older browsers. Properties take several types of values, including predefined keywords, percentage values, specific length measurements, color values, integers, and URLs. When using a style property, it is critical to know which values it accepts. Accepted values for each property are provided with the property listings in each CSS chapter as well as in Appendix B. The syntax for length measurement and color values is discussed in the upcoming "Specifying Values" section of this chapter. |
