A cascading stylesheet is a collection of one or more rules each of which bears the following form

    .selector
   {
    propertyA:value;
    propertyB:value;
    property..:value;
    ...

   }

Note that it is not necessary to have a ; terminator for the last property setting - i.e., the one immediately preceeding the closing brace, {. Never place a semicolon after the closing brace. Doing so can result in disastrous consequences.

The css term selector turns up as the term class in HTML. For instance in

<div class="data">

the assignment class="data" refers to the CSS selector data defined in an embedded or external stylesheet. Note the use of the . character preceeding the selector name. The . is not used when referencing the selector in HTML. The format for comments in CSS is /*comment text*/. CSS comments can be placed before or within rule sets and can span multiple lines. There should never be a semicolon after the closing brace.

While it is possible to create attractive webpages by simply using a stack of CSS rules, in the interests of writing compact, low maintenance code we recommend the use of CSS techniques such as grouping and nesting of selectors.

It is possible to place multiple property specifications on the same line - provided they are separated from one another by a semicolon thus:

propertyA:value;propertyB:value;property..:value;

Indeed, it is possible to put the entire style declaration into one single line. However, we strongly deprecate this practice. A better approach is to a use tool such as the one from CSSDrive to compress your code before deployment. An alternative is to compress it on the fly using a script such as the one discussed here. However, the latter approach does mean that your server will have to do extra work each time the CSS file is served up.

To ensure maximum compatibility you should always test your stylesheets for validity before deploying them. A free online validation service is available here.