The basic goal of the Cascading Stylesheet (CSS) language is to allow a browser engine to paint elements of the page with specific features, like colors, positioning, or decorations. The CSS syntax reflects this goal and its basic building blocks are:

  • The property which is an identifier, that is a human-readable name, that defines which feature is considered.
  • The value which describe how the feature must be handled by the engine. Each property has a set of valid values, defined by a formal grammar, as well as a semantic meaning, implemented by the browser engine.

CSS declarations

Setting CSS properties to specific values is the core function of the CSS language. A pair of properties and values is called a declaration, and any CSS engine calculates which declarations apply to every single element of a page in order to appropriately lay it out, and to style it.

Both properties and values are case-sensitive in CSS. The pair is separated by a colon, ':' (U+003A COLON), and white spaces before, between, and after properties and values, but not necessarily inside, are ignored.

css syntax - declaration.png

There are more than 100 different properties in CSS and a nearly infinitely amount of different values. Not all pair of properties and values are allowed and each property defined what are the valid values. When a value is not valid for a given property, the declaration is deemed invalid and is wholly ignored by the CSS engine.

CSS declarations blocks

Declarations are grouped in blocks, that is in a structure delimited by an opening brace, '{' (U+007B LEFT CURLY BRACKET), and a closing one, '}' (U+007D RIGHT CURLY BRACKET). Blocks sometimes can be nested, so opening and closing braces must be matched.

css syntax - block.png

Such blocks are naturally called declarations blocks and declarations inside them are separated by a semi-colon, ';' (U+003B SEMICOLON). A declaration block may be empty, that is containing null declaration. White spaces around declarations are ignored. The last declaration of a block doesn't need to be terminated by a semi-colon, though it is often considered good style to do it: it prevents forgetting to add it when extending the block with another declaration.

css syntax - declarations block.png

The content of a CSS declarations block, that is a list of semi-colon-separated declarations, without the initial and closing braces, can be put inside an HTML style attribute.

CSS rulesets

If style sheets could only apply a declaration to each element of a Web page, they would be pretty useless. The real goal is to apply different declarations to different parts of the document.

CSS allows this by associating conditions to declarations blocks. Each (valid) declaration block is preceded by a selector which is a condition selecting some elements of the page. The pair selector-declarations block is called a ruleset, or often simply a rule.

css syntax - ruleset.png

As an element of the page may be matched by several selectors, and therefore by several rules eventually containing several times a given property, with different values, the CSS standard defines which one has precedence over the other and must be applied: this is called the cascade algorithm.

It is important to note that even if a ruleset characterized by a group of selectors is a kind of shorthand replacing rulesets with a single selector each, this doesn't apply to the validity of the ruleset itself.

This leads to an important consequence: if one single basic selector is invalid, like when using an unknown pseudo-element or pseudo-class, the whole selector is invalid and therefor the entire rule is ignored (as invalid too).

CSS statements

Rulesets are the main building blocks of a style sheet, which often consists only of a big list of them. But there are other information that a Web author want to convey in the style sheet, like the character set, other external style sheets to import, font face or list counter descriptions and many more. It will use other and specific kinds of statements to do that.

A statement is a building block that begins with any non-space characters and end at the first closing brace or semi-colon (outside a string, non escaped and not included into another {}, () or [] pair).

css syntax - statements Venn diag.png

There are different kinds of statements:

  • Rulesets (or rules) that, as seen, associate a collection of CSS declaration to a condition described by a selector.
  • At-rules that start with an at sign, '@' (U+0040 COMMERCIAL AT), followed by an identifier and then continues up the end of the statement, that is up to the next semi-colon (;) outside of a block, or the end of the next block. Each type of at-rules, defined by the identifier, may have its own internal syntax, and semantic of course. They are used to convey meta-data information (like @charset or @import ), conditional information (like @media or @document ) ,or descriptive information (like @font-face ).

Any statement which isn't a rule or an at-rule is invalid and ignored.

There is another group of statements, the nested statements, these are statements that can be used in a specific subset of at-rules, the conditional group rules. These statements only apply if a specific condition is matched: the @media at-rule content is applied only if the device on which runs the browser matches the expressed condition; the @document at-rule content is applied only if the current page matches some conditions, and so on. In CSS1 and CSS2.1, only rulesets could be used inside a conditional group rules. That was very restrictive and this restriction was lifted in CSS Conditionals Level 3. Now, though it still is experimental and not support by every browser, a conditional group rules can contain a wider range of content, rulesets but also some, but not all, at-rules.

Tags (3)

Edit tags

Attachments (5)

FileSizeDateAttached by 
 css syntax - block.png
Syntax of a CSS block
25.73 kB07:34, 7 Mar 2012TeoliActions
 css syntax - declaration.png
Syntax of a CSS declaration
26.08 kB07:06, 7 Mar 2012TeoliActions
 css syntax - declarations block.png
Syntax of a CSS declarations block
51.48 kB07:34, 7 Mar 2012TeoliActions
css syntax - ruleset.png
Syntax of a CSS ruleset
35.46 kB15:43, 11 Mar 2012TeoliActions
css syntax - statements Venn diag.png
Relationships between the different kinds of CSS statements
37.41 kB15:42, 11 Mar 2012TeoliActions

Attach file