syndata.html

CSS lets learn this step by step...

<div class="example"><P style="display:none">Example(s):</P><P>
<PRE>
BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }
</PRE>
</div>

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

<div class="example"><P style="display:none">Example(s):</P><P>
<PRE>
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% */
</PRE>
</div>

<P> 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 ensures that
white (#ffffff) can be specified with the short notation (#fff) and
removes any dependencies on the color depth of the display.

<P> 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 or three percentage values) followed by ')'.
The integer value 255 corresponds to 100%, and to F or FF in the
hexadecimal notation: rgb(255,255,255) = rgb(100%,100%,100%) =
#FFF. <a href="#whitespace">Whitespace</a> characters are allowed
around the numerical values.

<P>All RGB colors are specified in the sRGB color space (see
<a href="refs.html#ref-SRGB" rel="biblioentry" class="noxref"><span class="normref">[SRGB]</span></a>).  User agents 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 (see <a href="refs.html#ref-COLORIMETRY" rel="biblioentry" class="noxref"><span class="normref">[COLORIMETRY]</span></a>).

<P>Conforming user agents 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. User agents should 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 <a
href="colors.html#gamma-correction">gamma correction</a> for further
details. Note that only colors specified in CSS are affected; e.g.,
images are expected to carry their own color information.

<P>Values outside the device gamut should be clipped: the red, green,
and blue values must be changed to fall within the range supported by
the device. For a typical CRT monitor, whose device gamut is the same
as sRGB, the three rules below are equivalent:

<div class="example"><P style="display:none">Example(s):</P><P>
<PRE>
EM { color: rgb(255,0,0) }       /* integer range 0 - 255 */
EM { color: rgb(300,0,0) }       /* clipped to rgb(255,0,0) */
EM { color: rgb(255,-10,0) }     /* clipped to rgb(255,0,0) */
EM { color: rgb(110%, 0%, 0%) }  /* clipped to rgb(100%,0%,0%) */
</PRE>

<p>Other devices, such as printers, have different gamuts to sRGB;
some colors outside the 0..255 sRGB range will be representable
(inside the device gamut), while other colors inside the 0..255 sRGB
range will be outside the device gamut and will thus be clipped.
</div>


<div class="note"><P>
<em><strong>Note.</strong>
Although colors can add significant amounts of information to document
and make them more readable, please consider that certain color
combinations may cause problems for users with color blindness. If you
use a background image or set the background color, please
adjust foreground colors accordingly.
</em>
</div>


<H3><a name="q19">4.3.7 Angles</a></H3>
<P>Angle values (denoted by <span class="index-def"
title="&lt;angle&gt;::definition of"><a
name="value-def-angle">&lt;angle&gt;</a></span> in the text) are used
with <a href="./aural.html">aural style sheets</a>.

<P>Their format is an optional sign character ('+' or '-', with '+'
being the default) immediately followed by a <span class="index-inst"
title="&lt;number&gt;"><a name="x55" href="syndata.html#value-def-number" class="noxref"><span
class="value-inst-number">&lt;number&gt;</span></a></span> immediately
followed by an angle unit identifier.

<P>Angle unit identifiers are:</p>

<ul>
<li><strong>deg</strong>: degrees
<LI><strong>grad</strong>: grads
<LI><strong>rad</strong>: radians
</UL>

<p>Angle values may be negative. They should be normalized to the
range 0-360deg by the user agent. For example, -10deg and 350deg are
equivalent.

<P>For example, a right angle is '90deg' or '100grad' or
'1.570796326794897rad'.

<H3><a name="q20">4.3.8 Times</a></H3>

<P>Time values (denoted by <span class="index-def" title="&lt;time&gt;::definition of"><a name="value-def-time">&lt;time&gt;</a></span> in the
text) are used with <a href="./aural.html">aural style
sheets</a>.

<P>Their format is a <span class="index-inst"
title="&lt;number&gt;"><a name="x57" href="syndata.html#value-def-number" class="noxref"><span
class="value-inst-number">&lt;number&gt;</span></a></span> immediately
followed by a time unit identifier.

<P>Time unit identifiers are:</p>

<UL>
<LI><strong>ms</strong>: milliseconds
<LI><strong>s</strong>: seconds
</UL>

<p>Time values may not be negative.

<H3><a name="q21">4.3.9 Frequencies</a></H3>

<P>Frequency values (denoted by <span class="index-def"
title="&lt;frequency&gt;::definition of"><a
name="value-def-frequency">&lt;frequency&gt;</a></span> in the text)
are used with <a href="./aural.html">aural cascading style
sheets</a>.

<P>Their format is a <span class="index-inst"
title="&lt;number&gt;"><a name="x59" href="syndata.html#value-def-number" class="noxref"><span
class="value-inst-number">&lt;number&gt;</span></a></span> immediately
followed by a frequency unit identifier.

<p>Frequency unit identifiers are:</p>

<ul>
<li><strong>Hz</strong>: Hertz
<li><strong>kHz</strong>: kilo Hertz
</ul>

<p>Frequency values may not be negative.

<P> For example, 200Hz (or 200hz) is a bass sound, and 6kHz (or 6khz)
is a treble sound.

<h3>4.3.10 <a name="strings">Strings</a></H3>

<P><span class="index-def" title="&lt;string&gt;, definition of"><a
name="value-def-string">Strings</a></span> can either be written
with double quotes or with single quotes. Double quotes cannot occur
inside double quotes, unless escaped (as '\"' or as
'\22'). Analogously for single quotes ("\'" or "\27"). 

<div class="example"><P style="display:none">Example(s):</P><P>
<pre>
"this is a 'string'"
"this is a \"string\""
'this is a "string"'
'this is a \'string\''
</pre>
</div>

<P>A string cannot directly contain a <a name="x61"><span class="index-inst"
title="newline">newline</span></a>. To include a newline in a string, use
the escape "\A" (hexadecimal A is the line feed character in Unicode,
but represents the generic notion of "newline" in CSS). See the <a href="generate.html#propdef-content" class="noxref"><span
class="propinst-content">'content'</span></a> property for an example.

<p>It is possible to break strings over several lines, for aesthetic
or other reasons, but in such a case the newline itself has to be
escaped with a backslash (\). For instance, the following two
selectors are exactly the same:

<div class="example"><P style="display:none">Example(s):</P>
<PRE>
A[TITLE="a not s\
o very long title"] {/*...*/}
A[TITLE="a not so very long title"] {/*...*/}
</pre>
</div>

<H2><a name="q23">4.4 CSS document representation</a></H2>

<P>A CSS style sheet is a sequence of characters from the Universal
Character Set (see <a href="refs.html#ref-ISO10646" rel="biblioentry" class="noxref"><span class="normref">[ISO10646]</span></a>). For transmission and
storage, these characters must be <a name="x62"><span class="index-def"
title="character encoding">encoded</span></a> by a character encoding that
supports the set of characters available in US-ASCII (e.g., ISO
8859-x, SHIFT JIS, etc.).  For a good introduction to character sets
and character encodings, please consult the HTML 4.0
specification (<a href="refs.html#ref-HTML40" rel="biblioentry" class="noxref"><span class="informref">[HTML40]</span></a>, chapter 5), See also the XML 1.0
specification (<a href="refs.html#ref-XML10" rel="biblioentry" class="noxref"><span class="informref">[XML10]</span></a>, sections 2.2 and 4.3.3, and Appendix F.

<P>When a style sheet is embedded in another document, such as in the
STYLE element or "style" attribute of HTML, the style sheet shares the
character encoding of the whole document.

<P>When a style sheet resides in a separate file, user agents must
observe the following <a name="x63"><span class="index-inst" title="character
encoding::user agent's determination of">priorities</span></a> when
determining a document's <a name="x64"><span class="index-inst" title="character
encoding::default|default::character encoding">character
encoding</span></a> (from highest priority to lowest):</p>

<ol>
<li>An HTTP "charset" parameter in a "Content-Type" field.
<li>The <a name="x66"><span class="index-def" title="@charset">@charset</span></a>
at-rule.
<li>Mechanisms of the language of the
referencing document (e.g., in HTML, the "charset"
attribute of the LINK element).
</ol>

<P>At most one @charset rule may appear in an external
style sheet -- it must <em>not</em> appear in an embedded style sheet
-- and it must appear at the very start of the document, not preceded
by any characters. After "@charset", authors specify the name of a
character encoding. The name must be a charset name as described in
the IANA registry (See <a href="refs.html#ref-IANA" rel="biblioentry" class="noxref"><span class="normref">[IANA]</span></a>. Also, see <a href="refs.html#ref-CHARSETS" rel="biblioentry" class="noxref"><span class="informref">[CHARSETS]</span></a> for a complete
list of charsets). For example:</p>

<div class="example"><P style="display:none">Example(s):</P><P>
@charset "ISO-8859-1";
</div>

<P>This specification does not mandate which character encodings
a user agent must support.

<P>Note that reliance on the @charset construct theoretically poses a
problem since there is no <em>a priori</em> information on how it is
encoded. In practice, however, the encodings in wide use on the
Internet are either based on ASCII, UTF-16, UCS-4, or (rarely) on
EBCDIC.  This means that in general, the initial byte values of a
document enable a user agent to detect the encoding family reliably,
which provides enough information to decode the @charset rule, which
in turn determines the exact character encoding.





<h3><a name="q24">4.4.1 Referring to characters not represented in a character encoding</a></h3>

<P>A style sheet may have to refer to characters that cannot be
represented in the current character encoding.  These characters must
be written as <a href="#escaped-characters">escaped</a> references to
ISO 10646 characters. These escapes serve the same purpose as numeric
character references in HTML or XML documents (see <a href="refs.html#ref-HTML40" rel="biblioentry" class="noxref"><span class="normref">[HTML40]</span></a>,
chapters 5 and 25).

<P>The character escape mechanism should be used when only a few
characters must be represented this way. If most of a document
requires escaping, authors should encode it with a more appropriate
encoding (e.g., if the document contains a lot of Greek characters,
authors might use "ISO-8859-7" or "UTF-8").

<P>Intermediate processors using a different character encoding may
translate these escaped sequences into byte sequences of that
encoding. Intermediate processors must not, on
the other hand, alter escape sequences that cancel the special meaning
of an ASCII character.

<P><a href="conform.html#conformance">Conforming user agents</a> must
correctly map to Unicode all characters in any character encodings
that they recognize (or they must behave as if they did).

<P>For example, a document transmitted as ISO-8859-1
(Latin-1) cannot contain Greek letters directly:
"&#954;&#959;&#965;&#961;&#959;&#962;" (Greek: "kouros") has to be
written as "\3BA\3BF\3C5\3C1\3BF\3C2".

<div class="note"><P>
<em><strong>Note.</strong>
In HTML 4.0,
numeric character references are interpreted in "style" attribute
values but not in the content of the STYLE element. Because of this
asymmetry, we recommend that authors use the CSS character
escape mechanism rather than numeric character references
for both the "style" attribute and the STYLE element.
For example, we recommend:</em></p>

<pre class="html-example">
&lt;SPAN style="voice-family: D\FC rst"&gt;...&lt;/SPAN&gt;
</pre>

<P><em>rather than:</em></p>

<pre class="html-example">
&lt;SPAN style="voice-family: D&amp;#252;rst"&gt;...&lt;/SPAN&gt;
</pre>
</div>

<hr class="navbar">

<div class="navbar" align="center">
<p><a href="conform.html">previous</a> &nbsp;
<a href="selector.html">next</a> &nbsp;
<a href="cover.html#minitoc">contents</a> &nbsp;
<a href="propidx.html">properties</a> &nbsp;
<a href="indexlist.html">index</a> &nbsp;
</div>
</BODY>
</html>