CSS Levels & Global Syntax - How do I Select Thee, Let Me Count the Ways - HTML With Style

CSS Levels & Global Syntax

Breaking a fine computing tradition that has lasted for decades, the people that designed the CSS specifications decided to split them into levels, not versions. There is a reason for this, and it's not just that it beats calling them CSS 3.1, CSS 95, CSS 98 and CSS NT. Each level of CSS is intended to expand the previous level, and compatibility between levels is required.

Thus, style sheets written in CSS do not have to conform to a specific version of the specification (as is the case with HTML), but merely have to follow the global syntax of CSS. Programs that process these style sheets can process the entire style sheet because it follows this syntax, but can simply ignore anything they don't understand, presumably because it's described in a level of CSS that they don't support. Also, every new level of CSS must include everything in the previous level as well.

There are currently two levels of CSS, appropriately named Level 1 and Level 2, and lovingly called CSS1 and CSS2 by most of us. CSS support in the Big Two Browsers started with Internet Explorer 3.0. The implementation in that browser was, to say the least, horrible, and appropriately ruined everyone's dreams of compatibility between CSS levels as the browser understood various forms of CSS syntax incorrectly and failed to ignore several forms of more advanced syntax, interpreting it in its own creative way. This fine tradition of misimplementation was, alas, continued in Internet Explorer 4.0 as well as Netscape Navigator 4.0, the first version of Navigator to support CSS. While the world of the Web is holding its breath for the fifth generation of the two browsers (and actively participating in the development of one), using CSS is a very touchy process that holds many pitfalls.

Following our policy here at HTML with Style, I will tell you how to properly write CSS, and then point out the things you should avoid in order to not trigger any bugs. From then on, it's up to you to decide what you should use and what you should avoid.

Global Syntax

Every CSS style sheet consists of a series of statements. These statements can be surrounded by white space (spaces, newlines and tabs) which is ignored. There are two types of statements: rulesets and at- rules.

Comments

You can have comments anywhere in CSS. A comment starts with the sequence slash-star (/*) and ends with the sequence star-slash (*/). Note that comments can not be nested, i.e. you cannot have a comment within a comment.

Blocks

CSS statements sometimes contain blocks. A block starts with a left curly brace ({) and ends with a matching right curly brace (}). Blocks can be nested, that is you can have a block within a block, but every left curly brace must have a matching right curly brace. So the following example of two nested blocks is legal (though it does not actually do anything), and also illustrates the use of comments:

{           /* outer block starts */
 foo;
 { bar; }   /* inner block */
 baz;
 bafoo;
}           /* outer block ends */

But the following is not, because the first left curly brace does not have a matching right curly brace:

{           /* outer block starts but is never ended */
foo;
bar;
{           /* inner block starts */
 baz;
}           /* inner block ends */

Other characters that must always be matched are parentheses (( and )), brackets ([ and ]), single quotes (' and ') and double quotes (" and "). Anything between single or double quotes is considered a string and has special meaning in CSS.

Produced by Stephanos Piperoglou

All Rights Reserved. Legal Notices.

URL: https://www.webreference.com/html/tutorial6/2.html
Created: September 24, 1998
Revised: September 24, 1998