Cascading Style Sheets (CSS)

2009 Apr 28

Note: Relative URLs in a style sheet are relative to the style sheet not the document.

Notation for property values:

• vertical bar: | means chose exactly one
• double vertical bar in square brackets: [ a || b || c ] means can chose one or more (space separated)
• combined form: x | [ a || b || c ] | y

CSS Rules

Each CSS rule consists of a Selector followed by a Declaration block:

A Declaration block consists of curly braces containing a sequence of Declarations.
A Declaration is a property followed by a colon, followed by a value, followed by a semi-colon.

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

A value is one or more space separated keywords appropriate to the property. The one exception is the font property where a forward slash can separate specific keywords, e.g.:

p { font: large/256% sans-serif; }

There can optionally be other spaces in the rule. If an incorrect (i.e. unknown) property or value is used, then the declatation is ignored.

CSS Comments

CSS comments are like C/C++ comments they start with /* and end with */ and can span multiple lines.

This allows HTML style comments, <!-- ... -->, to surround CSS rules in case an old browser does not support the CSS related elements.

CSS Keywords

Keywords that can apply depend on the element and attribute. The same keyword may have different meaning for different elements or attributes.

Projection Media

See Cascade Rules. Projection media are like print media in that the display size is fixed. At this time only the Opera agent supports this.

External Links