syndata.html

CSS lets learn this step by step...

<div class="illegal-example"><P style="display:none">Illegal example(s):</P><P>
In the following example, the second '@import' rule is invalid,
since it occurs inside a '@media' <a href="#block">block</a>.

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

<H3>4.1.6 <a name="block">Blocks</a></H3>

<P> A <a name="x12"><span class="index-inst" title="block"><em>block</em></span></a>
starts with a left curly brace ({) and ends with the matching right
curly brace (}). In between there may be any characters, except that
parentheses ((&nbsp;)), brackets ([&nbsp;]) and braces ({&nbsp;}) must
always occur in
matching pairs and may be nested. Single (') and double quotes (")
 must also occur in matching pairs, and characters between them
are parsed as a <a name="x13"><span class="index-inst" title="string">string</span></a>.
See <a href="#tokenization">Tokenization</a> above for the definition
of a string.


<div class="illegal-example"><P style="display:none">Illegal example(s):</P>
<P> Here is an example of a block. Note that the right brace between
the double quotes does not match the opening brace of the block, and that the
second single quote is an <a href="#escaped-characters">escaped
character</a>, and thus doesn't match the first single quote:

<PRE>
{ causta: "}" + ({7} * '\'') }
</PRE>

<P>Note that the above rule is not valid CSS2, but it is still
a block as defined above.
</div>

<H3><a name="q8">4.1.7 Rule sets, declaration blocks, and selectors</a></H3>

<P> A rule set (also called "rule") consists of a selector followed by
a declaration block.

<P> A <a name="x14"><span class="index-def"
title="declaration-block"><dfn>declaration-block</dfn></span></a> (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 must be a list of zero or more semicolon-separated (;)
declarations.

<P>The <a name="x15"><span class="index-def"
title="selector"><em>selector</em></span></a> (see also the section on <a
href="selector.html">selectors</a>) consists of everything up to (but
not including) the first left curly brace ({).  A selector always goes
together with a {}-block. When a user agent can't parse the selector (i.e., it
is not valid CSS2), it must <span class="index-inst" title="ignore"><a name="x16"
href="#ignore">ignore</a></span> the {}-block as well.

<P>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 <span class="index-inst" title="ignore"><a name="x17"
href="#ignore">ignored</a></span> if there is an error anywhere in the
selector, even though the rest of the selector may look reasonable in
CSS2.

<DIV class=illegal-example><P style="display:none">Illegal example(s):</P>
<P>For example, since the "&amp;" is not a valid token in a CSS2
selector, a CSS2 user agent must
<span class="index-inst" title="ignore"><a name="x18" href="#ignore">ignore</a></span>
the whole second line, and not set the color of H3 to red:
<PRE>
H1, H2 {color: green }
H3, H4 &amp; H5 {color: red }
H6 {color: black }
</PRE>
</DIV>

<div class="example"><P style="display:none">Example(s):</P><P>
<P>Here is a more complex example. The first two pairs of curly braces
are inside a string, and do not mark the end of the selector. This is
a valid CSS2 statement.
<PRE>
P[example="public class foo\
{\
    private int x;\
\
    foo(int x) {\
        this.x = x;\
    }\
\
}"] { color: red }
</PRE>
</div>

<H3>4.1.8 <a name="declaration">Declarations</a> and <a
name="properties">properties</a></H3>

<P> A <a name="x19"><span class="index-def"
title="declaration"><dfn>declaration</dfn></span></a> is either empty or
consists of a <a name="x20"><span class="index-inst"
title="property">property</span></a>, followed by a colon (:), followed by
a value. Around each of these there may be <a
href="#whitespace">whitespace</a>.

<p>Because of the way selectors work, multiple declarations for the
same selector may be organized into semicolon (;) separated
groups.</p>

<div class="example"><P style="display:none">Example(s):</P><p>
Thus, the following rules:</p>
<pre>
H1 { font-weight: bold }
H1 { font-size: 12pt }
H1 { line-height: 14pt }
H1 { font-family: Helvetica }
H1 { font-variant: normal }
H1 { font-style: normal }
</pre>

<p>are equivalent to:</p>

<pre>
H1 {
  font-weight: bold;
  font-size: 12pt;
  line-height: 14pt;
  font-family: Helvetica;
  font-variant: normal;
  font-style: normal
}
</pre>
</div>

<P>A property is an <a
href="#value-def-identifier">identifier</a>. Any character may occur
in the value, but parentheses ("(&nbsp;)"), brackets ("[&nbsp;]"),
braces ("{&nbsp;}"), single
quotes (') and double quotes (")  must come in matching
pairs, and semicolons not in strings must be <a
href="#escaped-characters">escaped</a>. Parentheses, brackets, and
braces may be nested. Inside the quotes, characters are parsed as a
string.

<P>The syntax of <a name="x21"><span class="index-def" title="value">values</span></a>
is specified separately for each property, but in any case, values are
built from identifiers, strings, numbers, lengths, percentages, URIs,
colors, angles, times, and frequencies.

<P>A user agent must <span class="index-inst" title="ignore"><a name="x22"
href="#ignore">ignore</a></span> 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.

<div class="illegal-example"><P style="display:none">Illegal example(s):</P><P>
For example, assume a CSS2 parser encounters this style sheet:

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

<P> The second declaration on the first line has an invalid value
'12pt'. The second declaration on the second line contains an
undefined property 'font-vendor'. The CSS2 parser will <span
class="index-inst" title="ignore"><a name="x23" href="#ignore">ignore</a></span> these
declarations, effectively reducing the style sheet to:

<PRE class="example">
H1 { color: red; }
P { color: blue;  font-variant: small-caps }
EM EM { font-style: normal }
</PRE>
</div>

<H3>4.1.9 <a name="comments">Comments</a></H3>

<P><a name="x24"><span class="index-inst" title="comments">Comments </span></a> begin
with the characters "/*" and end with the characters "*/". They may
occur anywhere between tokens,
and their contents have no influence on the rendering.  Comments may
not be nested.

<P>CSS also allows the SGML comment delimiters ("&lt;!--" and
"--&gt;") in certain places, but they do not delimit CSS
comments. They are permitted so that style rules appearing in an HTML
source document (in the STYLE element) may be hidden from pre-HTML 3.2
user agents. See the HTML 4.0 specification (<a href="refs.html#ref-HTML40" rel="biblioentry" class="noxref"><span class="informref">[HTML40]</span></a>) for more information.


<H2>4.2 <a name="parsing-errors">Rules for handling parsing
errors</a></H2>

<P>In some cases, user agents must ignore part of an illegal style
sheet. This specification defines <span class="index-def"
title="ignore"><a name="ignore"><dfn>ignore</dfn></a></span> to mean
that the user agent parses the illegal part (in order to find its
beginning and end), but otherwise acts as if it had not been there.



<P>To ensure that new properties and new values for existing
properties can be added in the future, user agents are required to
obey the following rules when they encounter the following
scenarios:</p>

<UL>
<LI><strong>Unknown properties.</strong> User agents must <span
class="index-inst" title="ignore"><a name="x26" href="#ignore">ignore</a></span> a <a
href="syndata.html#declaration">declaration</a> with an unknown
property. For example, if the style sheet is:

<PRE class="illegal-example">
H1 { color: red; rotation: 70minutes }
</PRE>

<P> the user agent will treat this as if the style sheet had been

<PRE class="example">
H1 { color: red }
</PRE>

<LI><strong>Illegal values.</strong> User agents must ignore a
declaration with an illegal value. For example:

<PRE class="illegal-example">
IMG { float: left }       /* correct 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 */
</PRE>

A CSS2 parser would honor the first rule and
<span class="index-inst" title="ignore"><a name="x27" href="#ignore">ignore</a></span>
the rest, as if the style sheet had been:

<PRE class="example">
IMG { float: left }
IMG { }
IMG { }
IMG { }
</PRE>

<P>A user agent conforming to a future CSS specification may accept one or
more of the other rules as well.</P>

<LI><strong>Invalid at-keywords.</strong> User agents must <span
class="index-inst" title="ignore"><a name="x28" href="#ignore">ignore</a></span> an
invalid at-keyword together with everything following it, up to and
including the next semicolon (;) or block ({...}), whichever
comes first. For example, consider the following:

<PRE class="illegal-example">
@three-dee {
  @background-lighting {
    azimuth: 30deg;
    elevation: 190deg;
  }
  H1 { color: red }
}
H1 { color: blue }
</PRE>

<P> The '@three-dee' at-rule is not part of CSS2. Therefore, the whole
at-rule (up to, and including, the third right curly brace) is <span
class="index-inst" title="ignore"><a name="x29" href="#ignore">ignored.</a></span> A
CSS2 user agent <span class="index-inst" title="ignore"><a name="x30"
href="#ignore">ignores</a></span> it, effectively reducing the style sheet
to:</P>

<PRE class="example">
H1 { color: blue }
</PRE>

</UL>


<H2>4.3 <a name="values">Values</a></H2>

<H3><a name="q13">4.3.1 Integers and real numbers</a></H3>

<P>Some value types may have integer values (denoted by <span
class="index-def" title="&lt;integer&gt;::definition of"><a
name="value-def-integer" class="value-def">&lt;integer&gt;</a></span>)
or real number values (denoted by <span class="index-def"
title="&lt;number&gt;::definition of"><a name="value-def-number"
class="value-def">&lt;number&gt;</a></span>).  Real numbers and
integers are specified in decimal notation only. An &lt;integer&gt;
consists of one or more digits "0" to "9". A &lt;number&gt; can either
be an &lt;integer&gt;, or it can be zero or more digits followed by a
dot (.) followed by one or more digits. Both integers and real numbers
may be preceded by a "-" or "+" to indicate the sign.

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

<H3>4.3.2 <A NAME="length-units">Lengths</A></H3>

<P>Lengths refer to horizontal or vertical measurements.

<P> The format of a length value (denoted by <span class="index-def"
title="&lt;length&gt;::definition of"><a name="value-def-length"
class="value-def">&lt;length&gt;</a></span> in this specification) is
an optional sign character ('+' or '-', with '+' being the default)
immediately followed by a <a href="syndata.html#value-def-number" class="noxref"><span
class="value-inst-number">&lt;number&gt;</span></a> (with or without a
decimal point) immediately followed by a unit identifier (e.g., px,
deg, etc.). After the '0' length, the unit identifier is optional.