JavaScript EditorBest javascript editor debugger     Ajax website 

Main Page

Previous Page
Next Page

Constructing a Style Rule

Each style rule in a style sheet has two main parts: the selector, which determines which elements are affected and the declaration, made up of one or more property/value pairs, which specifies just what should be done (Figures 7.1 and 7.2).

Figure 7.1. A style rule is made up of a selector (which indicates which elements will be formatted), and a declaration (which describes the formatting that should be executed).

Figure 7.2. Multiple property/value pairs in the declaration must be separated by a semicolon. Some folks simply end every property/value pair with a semicolonincluding the last pair in a listso that they never forget to add it. That's fine, as shown here, but not required. Note the extra spacing and indenting to keep everything readable.

To construct a style rule:

Type selector, where selector identifies the elements you wish to format. You'll learn how to create all sorts of selectors in Chapter 9, Defining Selectors.

Type { (an opening curly bracket) to begin the declaration.

Type property: value;, where property is the name of the CSS property that describes the sort of formatting you'd like to apply and value is one of a list of allowable options for that property. CSS properties and their values are described in detail in Chapters 1014.

Repeat step 3 as needed.

Type } to complete the declaration and the style rule.


  • You may add extra spaces, tabs, or returns between the steps above as desired to keep the style sheet readable (Figure 7.2).

  • While each property/value pair should be separated from the next by a semicolon, you may omit the semicolon that follows the last pair in the list. Still, it's easier to always use it than to remember when it's possible to omit it.

  • Missing (or duplicate) semicolons can make the browser completely ignore the style rule.

Previous Page
Next Page

JavaScript EditorBest javascript editor debugger     Ajax website