4 CSS2 syntax and basic data types

4.1 Syntax

This section describes a grammar common to any version of CSS (including CSS2). Future versions of CSS will adhere to this core syntax, although they may add additional syntactic constraints.

The following descriptions are normative. They are also complemented by the normative grammar rules presented in Appendix B.

4.1.1 Tokenization

All levels of CSS, level 1, level 2, but also any future levels, use the same core syntax. This allows UAs to parse (though not, of course, completely understand) style sheets written in levels of CSS that didn't exist at the time the UAs were created. Designers can use this feature to create style sheets that work with downlevel UA, while also exercising the possibilities of the latest levels of CSS.

CSS style sheets consist of a sequence of tokens. The list of tokens for CSS2 is as follows. The definitions use Lex-style regular expressions. Octal codes refer to Unicode. Like in Lex, in case of multiple matches, the longest match determines the token.

Token	Definition
IDENT	{ident}
AT-KEYWORD	@{ident}
STRING	{string}
HASH	#{name}
NUMBER	{num}
PERCENTAGE	{num}%
DIMENSION	{num}{ident}
URL	url\({w}{string}{w}\)|url\({w}([^ \n\'\")]|\\\ |\\\'|\\\"|\\\))+{w}\)
RGB	rgb\({w}{num}%?{w}\,{w}{num}%?{w}\,{w}{num}%?{w}\)
UNICODE-RANGE	U\+[0-9A-F?]{1,8}(-[0-9A-F]{1,8})?
CDO	\<!--
CDC	-->
DELIM	[^][;{} \t\r\n()]
SEMICOLON	;
LBRACE	\{
RBRACE	\}
LPAR	\(
RPAR	\)
LBRACK	\[
RBRACK	\]
WHITESPACE	[ \t\r\n]+
COMMENT	/\*([^*]|\*[^/])*\*/

The macros in curly braces ({}) above are defined as follows:

Macro	Definition
ident	{nmstart}{nmchar}*
nmstart	[a-zA-Z]|{nonascii}|{escape}
nonascii	[^\0-\177]
escape	\\[0-9a-fA-F]{1,6}
nmchar	{nmstart}|[-0-9]
num	[0-9]+|[0-9]*\.[0-9]+
string	\"({stringchar}|\')*\"|\'({stringchar}|\")*\'
stringchar	{escape}|{nonascii}|[\40-\176]

Below is the core syntax for CSS. The following sections describe how to use it. Also see Appendix B, for a more restrictive grammar that is closer to the CSS level 2 language.

stylesheet  : (CDO | CDC | statement)*;
statement   : ruleset | at-rule;
at-rule     : AT-KEYWORD any* (block | ';');
block       : '{' (at-rule | any | block)* '}';
ruleset     : selector '{' declaration? (';' declaration)* '}';
selector    : any+;
declaration : property ':' value;
property    : IDENT;
value       : (any | block | AT-KEYWORD)+;
any         : IDENT | NUMBER | PERCENTAGE | DIMENSION | STRING
              | DELIM | URL | RGB | HASH | UNICODE-RANGE
              | '(' any* ')' | '[' any* ']';

WHITESPACE and COMMENT tokens do not occur in the grammar (to keep it readable), but any number of these tokens may appear anywhere. The content of these tokens (the matched text) doesn't matter, but their presence or absence may change the interpretation of some part of the style sheet. For example, in CSS2 the WHITESPACE is significant in selectors.

4.1.2 Characters and case

The following rules always hold:

• All CSS style sheets are case-insensitive , except for parts that are not under the control of CSS. For example, the case-sensitivity of the HTML attributes 'id' and 'class', of font names, and of URLs lies outside the scope of this specification. Note in particular that element names are case-insensitive in HTML, but case-sensitive in XML.
• In CSS2, selectors (element names, classes and IDs) can contain only the characters [A-Za-z0-9] and [UNICODE] characters 161 and higher, plus the hyphen (-); they cannot start with a hyphen or a digit; they can also contain escaped characters and any Unicode character as a numeric code (see next item).
• The backslash (\) followed by at most six hexadecimal digits (0..9A..F) stands for the [UNICODE] character with that number.
• Any character except a hexadecimal digit can be escaped to remove its special meaning, by putting a backslash (\) in front, For example, "\"" is a string consisting of one double quote.
• The two preceding items define backslash-escapes . Backslash-escapes are always considered to be part of an identifier or a strings (i.e., "\7B" is not punctuation, even though "{" is, and "\32" is allowed at the start of a class name, even though "2" is not).

4.1.3 Statements

A CSS style sheet, for any version of CSS, consists of a list of statements  (see the grammar above). There are two kinds of statements: at-rules  and rule sets.  There may be whitespace (spaces, tabs, newlines) around the statements.

In this specification, the expressions "immediately before" or "immediate after" mean "with no intervening white space."

4.1.4 At-rules

At-rules start with an at-keyword, which is an identifier with an '@' at the start (for example, '@import', '@page', etc.). An identifier consists of letters, digits, hyphens, non-ASCII, and escaped characters.

An at-rule consists of everything up to and including the next semicolon (;) or the next block (defined shortly), whichever comes first. A CSS UA that encounters an unrecognized at-rule must ignore the whole of the @-rule and continues parsing after it.

CSS2 User agents have some additional constraints, e.g., they must also ignore any '@import' rule that occurs inside a block or that doesn't preceded all rule sets.

  @import "subs.css";
  H1 { color: blue }
  @import "list.css";

  @import "subs.css";
  H1 { color: blue }

  @import "subs.css";
  @media print {
    @import "print-main.css";
    BODY { font-size: 10pt }
  }
  H1 {color: blue}

4.1.5 Blocks

A block  starts with a left curly brace ({) and ends with the matching right curly brace (}). In between there may be any characters, except that parentheses (()), brackets ([]) and braces ({}) always occur in matching pairs and may be nested. Single (') and double quotes (") also occur in matching pairs, and characters between them are parsed as a string . See Tokenization above for the definition of a string.

  { causta: "}" + ({7} * '\'') }

4.1.6 Rule sets, declaration blocks, and selectors

A rule set consists of a selector followed by a declaration block.

A declaration-block  (also called a {}-block in the following text) starts with a left curly brace ({) and ends with the matching right curly brace (}). In between there is a list of zero or more declarations, separated by semicolons (;).

The selector  (see also the section on selectors consists of everything up to (but not including) the first left curly brace ({). A selector always goes together with a {}-block. When a UA can't parse the selector (i.e., it is not valid CSS2), it should skip (i.e., ignore) the {}-block as well.

Note that CSS2 gives a special meaning to the comma (,) in selectors. However, since it is not known if the comma may acquire other meanings in future versions of CSS, the whole statement should be ignored if there is an error anywhere in the selector, even though the rest of the selector may look reasonable in CSS2.

H1, H2 {color: green}
H3, H4 & H5 {color: red}
H6 {color: black}

    P[example="public class foo
{
    private int x;

    foo(int x) {
        this.x = x;
    }

}"] {color: red}

4.1.7 Declarations and properties

A declaration consists of a property , a colon (:) and a value. Around each of these there may be whitespace. A property is an identifier, as defined earlier. Any character may occur in the value, but parentheses (()), brackets ([]), braces ({}), single quotes (') and double quotes (") must come in matching pairs. Parentheses, brackets, and braces may be nested. Inside the quotes, characters are parsed as a string.

To ensure that new properties and new values for existing properties can be added in the future, a UA must skip a declaration with an invalid property name or an invalid value. Every CSS2 property has its own syntactic and semantic restrictions on the values it accepts.

  H1 { color: red; font-style: 12pt }  /* Invalid value: 12pt */
  P { color: blue;  font-vendor: any;  /* Invalid: font-vendor */
      font-variant: small-caps }
  EM EM { font-style: normal }

  H1 { color: red; }
  P { color: blue;  font-variant: small-caps }
  EM EM { font-style: normal }

4.1.8 Comments

Comments   begin with the characters "/*" and end with the characters "*/". They may occur anywhere where whitespace can occur and their contents have no influence on the rendering. Comments may not be nested.

CSS also allows the SGML comment delimiters ("<!--" and "-->") in certain places, but they do not delimit comments. They are included so that style rules appearing in an HTML source document (in the STYLE element) may be hidden from pre-HTML3.2 browsers. See HTML4[ref] for more information.

4.1.9 More examples

Here are a few more examples of error handling by a CSS (in particular CSS2) UA.

• Unknown properties. User agents must ignore a declaration with an unknown property. For example, if the style sheet is:

   H1 { color: red; rotation: 70minutes }
  

  the UA will treat this as if the style sheet had been

    H1 { color: red; }
  

• Illegal values. User agents must treat illegal values, or values with illegal parts, as if the entire declaration weren't there at all:

    IMG { float: left }       /* CSS2 */
    IMG { float: left here }  /* "here" is not a value of 'float' */
    IMG { background: "red" } /* keywords cannot be quoted in CSS2 */
    IMG { border-width: 3 }   /* a unit must be specified for length values */
  

  In the above example, a CSS2 parser would honor the first rule and ignore the rest, as if the style sheet had been:

    IMG { float: left }
    IMG { }
    IMG { }
    IMG { }
  

  A UA conforming to a future CSS specification may accept one or more of the other rules as well.

• User agents must ignore an invalid at-keyword together with everything following it, up to and including the next semicolon (;) or brace pair ({...}), whichever comes first. For example, assume the style sheet reads:

    @three-dee {
      @background-lighting {
        azimuth: 30deg;
        elevation: 190deg;
      }
      H1 { color: red }
    }
    H1 { color: blue }
  

  The '@three-dee' is illegal according to CSS2. Therefore, the whole at-rule (up to, and including, the third right curly brace) is ignored. The CSS2 UA skips it, effectively reducing the style sheet to:

    H1 { color: blue }
  

4.2 Values

4.2.1 Integers and numbers

Some value types may have integer values, denoted by <integer>  in this specification.

Some value types may have number values, denoted by <number>  in this specification. A number may have a decimal point.

In CSS2, numbers and integers are specified in decimal notation only. An <integer> consists of one or more digits "0" to "9". A <number> can either be an <integer>, or it can be zero of more digits followed by a dot followed by one or more digits. Both integers and numbers may be preceded by a "-" or "+" to indicate the sign.

Note that many properties that allow a number or integer as value actually restrict the value to some range, often to a non-negative value.

4.2.2 Lengths

The format of a length value (denoted by <length>  in this specification) is an optional sign character ('+' or '-', with '+' being the default) immediately followed by a number (with or without a decimal point) immediately followed by a unit identifier (an abbreviation between one and four letters). After a '0' number, the unit identifier is optional.

Some properties allow negative length units, but this may complicate the formatting model and there may be implementation-specific limits. If a negative length value cannot be supported, it should be converted to the nearest value that can be supported.

There are two types of length units: relative and absolute. Relative length  units specify a length relative to another length property. Style sheets that use relative units will more easily scale from one medium to another (e.g., from a computer display to a laser printer).

Percentage units (described below) and keyword values (e.g. 'x-large') offer similar advantages.

These relative units are supported: em, ex, and px.

  H1 { margin: 0.5em }      /* ems, the height of the element's font */
  H1 { margin: 1ex }        /* x-height, the height of the letter 'x' */
  P  { font-size: 12px }    /* pixels, relative to viewing device */

The 'em' unit, as used in CSS, is equal to the font size  used when rendering an element's text. It may be used for vertical or horizontal measurement. The 'ex' unit is equal to the font's x-height (the height of the letter 'x') of the element's font. A font need not contain the letter "M" to have an 'em' size or the letter "x" to have an x-height; the font should still define the two units.

Both 'em' and 'ex' refer to the font size of an element except when used in the 'font-size' property, where they are relative to the font size inherited from the parent element.

H1 { line-height: 1.2em }

H1 { font-size: 1.2em }

Please consult the section on line height calculations for more information about line heights in the visual flow model.

Pixel units  are relative to the resolution of the viewing device, i.e., most often a computer display. If the pixel density of the output device is very different from that of a typical computer display, the UA should rescale pixel values. The suggested reference pixel  is the visual angle of one pixel on a device with a pixel density of 90dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is about 0.0227 degrees.

Child elements do not inherit the relative values specified for their parent; they inherit the computed values. For example:

  BODY {
    font-size: 12pt;
    text-indent: 3em;  /* i.e. 36pt */
  }
  H1 { font-size: 15pt } 

Absolute length  units are only useful when the physical properties of the output medium are known. These absolute units are supported: in (inches), cm (centimeters), mm (millimeters), pt (points), and pc (picas).

  H1 { margin: 0.5in }      /* inches, 1in = 2.54cm */
  H2 { line-height: 3cm }   /* centimeters */
  H3 { word-spacing: 4mm }  /* millimeters */
  H4 { font-size: 12pt }    /* points, 1pt = 1/72 in */
  H4 { font-size: 1pc }     /* picas, 1pc = 12pt */

In cases where the specified length cannot be supported, UAs should try to approximate. For all CSS2 properties, further computations and inheritance should be based on the approximated value.

4.2.3 Percentages

The format of a percentage value (denoted by <percentage>  in this specification) is an optional sign character ('+' or '-', with '+' being the default) immediately followed by a number immediately followed by '%'.

Percentage values are always relative to another value, for example a length unit. Each property that allows percentage units also defines what value the percentage refers to.

  P { font-size: 10pt }
  P { line-height: 120% }  /* relative to 'font-size', i.e. 12pt */

4.2.4 URLs

A Uniform Resource Locator, or URL  (denoted by <url>  in this specification) is identified with a functional notation.

  BODY { background: url(http://www.bg.com/pinkish.gif) }

The format of a URL value is 'url(' followed by optional white space followed by an optional single quote (') or double quote (") character followed by the URL itself (as defined in [RFC1738]) followed by an optional single quote (') or double quote (") character followed by optional whitespace followed by ')'. Quote characters that are not part of the URL itself must be balanced.

Parentheses, commas, whitespace characters, single quotes (') and double quotes (") appearing in a URL must be escaped with a backslash: '\(', '\)', '\,'.

In order to create modular style sheets that are not dependent on the absolute location of a resource, authors may specify the location of background images with partial URLs. Partial URLs (as defined in [RFC1808]) are interpreted relative to the base URL of the style sheet, not relative to the base URL of the source document.

  BODY { background: url(yellow) }

User agents may vary in how they handle URLs that designate unavailable or inapplicable resources.

4.2.5 Colors

The suggested list of keyword color names is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. These 16 colors are taken from the Windows VGA palette, and their RGB values are not defined in this specification.

  BODY {color: black; background: white }
  H1 { color: maroon }
  H2 { color: olive }

The RGB color model is used in numerical color specifications. These examples all specify the same color:

  EM { color: #f00 }              /* #rgb */
  EM { color: #ff0000 }           /* #rrggbb */
  EM { color: rgb(255,0,0) }      /* integer range 0 - 255 */
  EM { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */

In addition to these color keywords, users may specify keywords that correspond to the colors used by certain objects in the user's environment. Please consult the section on system colors for more information.

The format of an RGB value in hexadecimal notation is a '#' immediately followed by either three or six hexadecimal characters. The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This makes sure that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the color depth of the display.

The format of an RGB value in the functional notation is 'rgb(' followed by a comma-separated list of three numerical values (either three integer values in the range of 0-255, or three percentage values, typically in the range of 0.0% to 100.0%) followed by ')'. Whitespace characters are allowed around the numerical values.

Values outside the device gamut should be clipped. For a device whose gamut is sRGB, the three rules below are equivalent:

  EM { color: rgb(255,0,0) }       /* integer range 0 - 255 */
  EM { color: rgb(300,0,0) }       /* clipped to 255 */
  EM { color: rgb(110%, 0%, 0%) }  /* clipped to 100% */

All RGB colors are specified in the sRGB color space (see [SRGB]). UAs may vary in the fidelity with which they represent these colors, but using sRGB provides an unambiguous and objectively measurable definition of what the color should be, which can be related to international standards [COLORIMETRY].

Conforming UAs may limit their color-displaying efforts to performing a gamma-correction on them. sRGB specifies a display gamma of 2.2 under specified viewing conditions. UAs adjust the colors given in CSS such that, in combination with an output device's "natural" display gamma, an effective display gamma of 2.2 is produced. See the section on gamma correction for further details. Note that only colors specified in CSS are affected; e.g., images are expected to carry their own color information.

4.2.6 Angles

Angle units (denoted by <angle>  in the text) are used with aural cascading style sheets.

These following are legal angle units:

• deg: degrees
• grad: gradient
• rad: radians

Values in these units may be negative. They should be normalized to the range 0-360deg by the UA. For example, -10deg and 350deg are equivalent. The angle value must be followed immediately by the angle unit without an intervening space.

The angle value must be immediately followed by the angle unit.

4.2.7 Time

Time units (denoted by <time>  in the text) are used with aural cascading style sheets.

These following are legal time units:

• ms: milliseconds
• s: seconds

Time values may not be negative. The time value must be followed immediately by the time unit without an intervening space.

4.2.8 Frequencies

Frequency units (denoted by <frequency>  in the text) are used with aural cascading style sheets.

There are two legal frequency units:

• Hz: Hertz
• kHz: kilo Hertz

The frequency value must be followed immediately by the frequency unit without an intervening space.

4.3 CSS embedded in HTML

CSS style sheets may be embedded in HTML documents, and to be able to hide style sheets from older UAs, it is convenient put the style sheets inside HTML comments. The HTML comment tokens "<!--" and "-->" may occur before, after, and in between the statements. They may have whitespace around them.

When CSS is embedded in HTML, it shares the charset parameter used to transmit the enclosing HTML document. As with HTML, the value of the charset parameter is used to convert from the transfer encoding to the document character set, which is Unicode.

4.4 CSS as a stand-alone file

CSS style sheets may exist in files by themselves, being linked from the document. In that case the CSS files are served with the media type text/css. As with all text media types, a charset parameter may be added which is used to convert from the transfer encoding to Unicode.

4.5 Character escapes in CSS

CSS may need to use characters which are outside the encoding used to transmit the document. For example, the "class" attribute of HTML allows more characters in a class name than the set allowed for selectors above. In CSS2, such characters can be escaped or written as Unicode numbers:"B&W?" can be written as "B\&W\?" or "B\26W\3F". For example, a document transmitted as ISO-8859-1 (Latin-1) cannot contain Greek letters directly: "Ϋουρος" (Greek: "kouros") has to be written as "\3BA\3BF\3C5\3C1\3BF\3C2". These escapes are thus the CSS equivalent of numeric character references in HTML or XML documents.