Rules and Style Sheets


You can create style sheets in two ways. You can either use a normal text editor and write the style sheets "by hand" or you can use a dedicated tool for example, a Web authoring tool. The dedicated tools enable you to create style sheets without learning the syntax of the CSS language. However, in many cases, the designer wants to tweak the style sheet by hand afterwards, so we recommend that you learn to write and edit CSS by hand. Let's get started! Here is a simple example:

 h1 { color: green } 

This code is a simple CSS rule that contains one rule. A rule is a statement about one stylistic aspect of one or more elements. A style sheet is a set of one or more rules that apply to an HTML document. This rule sets the color of all first-level headings (H1). Figure 2.1 shows what the visual result of this rule might be.

Figure 2.1. The headline in our sample document.


Unfortunately, this chapter is printed in black and white; you have to trust us that the color really is green.

Anatomy of a Rule

A rule consists of two parts (see Figure 2.2):

  • Selector: The part before the left curly brace

  • Declaration: The part within the curly braces

Figure 2.2. Two Main Parts of a Rule.


The selector links the HTML document and the style sheet. It specifies what elements are affected by the declaration. The declaration is the part of the rule that sets forth what the effect will be. In this example, the selector is H1 and the declaration is color: green. Hence, the declaration affects all H1 elements and, as a result, they will be green.

The example selector is based on the type of the element: It selects all elements of the H1 type. This kind of selector is called type selector. Any HTML element type can be used as a type selector. Type selectors are the simplest kind of selectors. We discuss other kinds of selectors in Chapter 4, "CSS selectors."

Anatomy of a Declaration

A declaration has two parts separated by a colon (see Figure 2.3):

  • Property: The part before the colon

  • Value: The part after the colon

Figure 2.3. Two main parts of a declaration.


The property is a quality or characteristic that something possesses. In the previous example, it is color. CSS 2.1 (see the box on the next page) defines approximately 120 properties, and we can assign values to all of them.

The value is a precise specification of the property. In the example, it is "green," but it could just as easily be blue, red, yellow, or another color.

Figure 2.4 shows all the ingredients of a rule. The curly braces ({ }) and colon (:) make it possible for the browser to distinguish between the selector, property, and value.

Figure 2.4. Diagram of a rule.


Grouping Selectors and Rules

In designing CSS, brevity was a goal. We figured that if we could reduce the size of the style sheets, we could enable designers to write and edit style sheets "by hand." Also, short style sheets load faster than longer ones. CSS therefore includes several mechanisms to shorten style sheets by way of grouping selectors and declarations.

For example, consider these three rules:

 H1 { font-style: italic } H2 { font-style: italic } H3 { font-style: italic } 

All three rules have exactly the same declaration they set the font style to italic. (This is done using the font-style property, which we discuss in Chapter 5, "Fonts.") Because all three declarations are identical, we can group the selectors into a comma-separated list and only list the declaration once, like this:

 h1, h2, h3 { font-style: italic } 

CSS Specifications

Cascading Style Sheets is formally described in three W3C specifications: CSS1, CSS2, and CSS 2.1. (As discussed in the previous chapter, W3C is the organization that coordinates the technical development of the Web.) The first specification, CSS1, was issued in December 1996 and describes a simple style sheet language mostly for screen-based presentations. CSS1 has around 50 properties (for example, color and font-size). CSS2 was finalized in May 1998 and builds on CSS1. CSS2 includes all CSS1 properties and adds around 70 of its own, such as properties to describe aural presentations and page breaks.

CSS 2.1 is the most recent specification published by W3C. It adds some new features, but CSS 2.1 is mostly a scaled-down version of CSS2. CSS2 was an ambitious attempt to describe functionality, which Web authors had requested. However, not all the functionality is reliably supported by all browsers. CSS 2.1 is a specification that describes the parts that are supported by two or more browsers. Because CSS 2.1 is similar to CSS2, the specification was given a minor version number (that is, 2.1) rather than a major number (such as CSS3). In this book, we do not try to distinguish between the different specifications and use the term "CSS" unless the distinction is important. If you would like to read the CSS specifications themselves, you can find them at this Web site:

http://www.w3.org/TR


This rule produces the same result as the first three.

A selector may have more than one declaration. For example, we could write a style sheet with these two rules:

 h1 { color: green } h1 { text-align: center } 

In this case, we set all H1s to green and to be centered on the canvas. (This is done using the text-align property, which is discussed in Chapter 5.)

But, we can achieve the same effect faster by grouping the declarations that relate to the same selector into a semicolon-separated list, like this:

 h1 {   color: green;   text-align: center; } 

All declarations must be contained within the pair of curly braces. A semicolon separates the declarations and may but doesn't have to also appear at the end of the last declaration. Also, to make your code easier to read, we suggest that you place each declaration on its own line, as we did here. (Browsers won't care; they'll just ignore all the extra white space and line breaks.)

Now you have the basics of how to create CSS rules and style sheets. However, you're not done yet. For the style sheet to have any effect, you have to "glue" your style sheet to your HTML document.



Cascading Style Sheets(c) Designing for the Web
Cascading Style Sheets: Designing for the Web (3rd Edition)
ISBN: 0321193121
EAN: 2147483647
Year: 2003
Pages: 215

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net