syndata.html

CSS lets learn this step by step...

<P> Some properties allow negative length values, 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.

<P><a name="absrel-units">There are two types of length units:
relative and absolute.</a> <a name="x34"><span class="index-def" title="relative
units"><em>Relative length</em></span></a> 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).

<P>Relative units are:
<ul>
<li><strong>em</strong>: the <a href="fonts.html#propdef-font-size" class="noxref"><span class="propinst-font-size">'font-size'</span></a> of the relevant font
<li><strong>ex</strong>: the <span class="descinst">'x-height'</span> of the relevant font
<li><strong>px</strong>: pixels, relative to the viewing device
</ul>

<div class="example"><P style="display:none">Example(s):</P><P>
<PRE>
H1 { margin: 0.5em }      /* em */
H1 { margin: 1ex }        /* ex */
P  { font-size: 12px }    /* px */
</PRE>
</div>

<P>The <span class="index-def" title="em (unit)|quad width"><a
name="em-width">'em'</a></span> unit is equal to the computed value of
the <a href="fonts.html#propdef-font-size" class="noxref"><span class="propinst-font-size">'font-size'</span></a> property of
the element on which it is used. The exception is when 'em' occurs in
the value of the 'font-size' property itself, in which case it refers
to the font size of the parent element. It may be used for vertical or
horizontal measurement. (This unit is also sometimes called the
quad-width in typographic texts.)

<p>The <span class="index-def" title="x-height|ex (unit)"><a
name="ex">'ex'</a></span> unit is defined by the font's <a href="fonts.html#descdef-x-height" class="noxref"><span
class="descinst-x-height">'x-height'</span></a>. The x-height is so called
because it is often equal to the height of the lowercase "x". However,
an 'ex' is defined even for fonts that don't contain an "x".

<div class="example"><P style="display:none">Example(s):</P>
<P>The rule:

<PRE>
H1 { line-height: 1.2em }
</PRE>

<P>means that the line height of H1 elements will be 20% greater
than the font size of the H1 elements. On the other hand:

<PRE>
H1 { font-size: 1.2em }
</PRE>

<P>means that the font-size of H1 elements will be 20% greater than
the font size inherited by H1 elements.
</div>

<P>When specified for the root of the <a href="conform.html#doctree">
document tree</a> (e.g., "HTML" in HTML), 'em' and 'ex' refer to
the property's <a href="cascade.html#initial-value">initial value</a>.

<P><a name="pixel-units">Pixel units</a> 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 user agent should rescale
pixel values. It is recommended that the <a name="x39"><span class="index-def"
title="reference pixel|pixel"><EM>reference pixel</EM></span></a> be 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 therefore about 0.0227
degrees.

<p>For reading at arm's length, 1px thus corresponds to about 0.28&nbsp;mm
(1/90&nbsp;inch). When printed on a laser printer, meant for reading at a
little less than arm's length (55&nbsp;cm, 21&nbsp;inches), 1px is about
0.21&nbsp;mm. On a 300 dots-per-inch (dpi) printer, that may be
rounded up to 3 dots (0.25&nbsp;mm); on a 600&nbsp;dpi printer, it can
be rounded to 5 dots.

<p>The two images below illustrate the effect of viewing distance on
the size of a pixel and the effect of a device's resolution. In the
first image, a reading distance of 71&nbsp;cm (28&nbsp;inch) results
in a px of 0.28&nbsp;mm, while a reading distance of 3.5&nbsp;m
(12&nbsp;feet) requires a px of 1.4&nbsp;mm. </p>

<div class="figure">
<p><img src="images/pixel1.gif" alt="Showing that pixels must become
larger if the viewing distance increases"><SPAN class="dlink">&nbsp;&nbsp;&nbsp;<A name="img-pixel1" href="images/longdesc/pixel1-desc.html" title="Long description for the illustration of a pixel's definition">[D]</A></SPAN> </p>
</div>

<P>In the second image, an
area of 1px by 1px is covered by a single dot in a low-resolution
device (a computer screen), while the same area is covered by 16 dots
in a higher resolution device (such as a 400&nbsp;dpi laser printer).</p>

<div class="figure">
<P><img
src="images/pixel2.gif" alt="Showing that more device pixels (dots)
are needed to cover a 1px by 1px area on a high-resolution device than
on a low-res one"><SPAN class="dlink">&nbsp;&nbsp;&nbsp;<A name="img-pixel2" href="images/longdesc/pixel2-desc.html" title="Long description for the illustration of reference
vs. device pixel">[D]</A></SPAN></p>
</div>

<P>Child elements do not inherit the relative values specified for
their parent; they (generally) inherit the <a
href="cascade.html#computed-value">computed values</a>.</p>

<div class="example"><P style="display:none">Example(s):</P><P> 
In the following rules, the computed <a href="text.html#propdef-text-indent" class="noxref"><span
class="propinst-text-indent">'text-indent'</span></a> value of H1 elements
will be 36pt, not 45pt, if H1 is a child of the BODY element.

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

<P><a name="x41"><span class="index-def" title="absolute length"><em> Absolute
length</em></span></a> units are only useful when the physical properties
of the output medium are known. The absolute units are:

<UL>
<LI><STRONG>in</STRONG>: inches -- 1 inch is equal to 2.54 centimeters.
<LI><STRONG>cm</STRONG>: centimeters
<LI><STRONG>mm</STRONG>: millimeters
<LI><STRONG>pt</STRONG>: points -- the points used by CSS2 are equal to 1/72th of an inch. 
<LI><STRONG>pc</STRONG>: picas -- 1 pica is equal to 12 points.
</UL>

<div class="example"><P style="display:none">Example(s):</P><P>
<PRE>
H1 { margin: 0.5in }      /* inches  */
H2 { line-height: 3cm }   /* centimeters */
H3 { word-spacing: 4mm }  /* millimeters */
H4 { font-size: 12pt }    /* points */
H4 { font-size: 1pc }     /* picas */
</PRE>
</div>

<P> In cases where the specified length cannot be supported, user
agents must approximate it in the actual value.

<H3>4.3.3  <A NAME="percentage-units">Percentages</A></H3>

<P> The format of a percentage value (denoted by <span
class="index-def" title="&lt;percentage&gt;::definition of"><a
name="value-def-percentage"
class="value-def">&lt;percentage&gt;</a></span> in this specification)
is an optional sign character ('+' or '-', with '+' being the default)
immediately followed by a <span class="index-inst"
title="&lt;number&gt;"><a name="x43" href="syndata.html#value-def-number" class="noxref"><span
class="value-inst-number">&lt;number&gt;</span></a></span> immediately
followed by '%'.

<P> Percentage values are always relative to another value, for
example a length. Each property that allows percentages also defines
the value to which the percentage refers. The value may be that of
another property for the same element, a property for an ancestor
element, or a value of the formatting context (e.g., the width of a <a
href="visuren.html#containing-block">containing block</a>). When a
percentage value is set for a property of the <a
href="conform.html#root">root</a> element and the percentage is
defined as referring to the inherited value of some property, the
resultant value is the percentage times the <a
href="cascade.html#initial-value">initial value</a> of that property.

<div class="example"><P style="display:none">Example(s):</P><P> 
Since child elements (generally) inherit the <a
href="cascade.html#computed-value">computed values</a> of their parent, in
the following example, the children of the P element will inherit a
value of 12pt for <a href="visudet.html#propdef-line-height" class="noxref"><span
class="propinst-line-height">'line-height'</span></a>, not the percentage
value (120%):

<PRE>
P { font-size: 10pt }
P { line-height: 120% }  /* 120% of 'font-size' */
</PRE>
</div>

<H3>4.3.4 <A NAME="uri">URL + URN = URI</A></H3>

<P><a name="x44"><span class="index-def" title="Uniform Resource Locator (URL)|URL
(Uniform Resource Locator)">URLs</span></a> (Uniform Resource Locators,
see <a href="refs.html#ref-RFC1738" rel="biblioentry" class="noxref"><span class="normref">[RFC1738]</span></a> and <a href="refs.html#ref-RFC1808" rel="biblioentry" class="noxref"><span class="normref">[RFC1808]</span></a>) provide the address of a resource on
the Web. An expected new way of identifying resources is called <a name="x46"><span
class="index-def" title="URN (Uniform Resource Name)|Uniform Resource
Name (URN)">URN</span></a> (Uniform Resource Name). Together they are
called <a name="x48"><span class="index-def" title="Resource Identifier (URI)|URI
(Uniform Resource Identifier)">URIs</span></a> (Uniform Resource
Identifiers, see <a href="refs.html#ref-URI" rel="biblioentry" class="noxref"><span class="normref">[URI]</span></a>). This specification uses the term URI.

<P>URI values in this specification are denoted by <span
class="index-def" title="&lt;uri&gt;::definition of"><a
name="value-def-uri" class="value-def">&lt;uri&gt;</a></span>.  The
functional notation used to designate URIs in property values is
"url()", as in:

<div class="example"><P style="display:none">Example(s):</P><P>
<PRE>
BODY { background: url("http://www.bg.com/pinkish.gif") }
</PRE>
</div>

<P> The format of a URI value is 'url(' followed by optional <a
href="#whitespace">whitespace</a> followed by an optional single quote
(') or double quote (") character followed by the URI
itself, followed by an optional single quote (') or double quote (")
character followed by optional whitespace followed by
')'. The two quote characters must be the same.

<div class="example"><P style="display:none">Example(s):</P><P>An example without quotes:
<PRE>
LI { list-style: url(http://www.redballs.com/redball.png) disc }
</PRE>
</div>

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

<P>Depending on the type of URI, it might also be possible to write
the above characters as URI-escapes (where "(" = %28, ")" = %29, etc.)
as described in <a href="refs.html#ref-URI" rel="biblioentry" class="noxref"><span class="normref">[URI]</span></a>.

<P> In order to create modular style sheets that are not dependent on
the absolute location of a resource, authors may use relative URIs.
Relative URIs (as defined in <a href="refs.html#ref-RFC1808" rel="biblioentry" class="noxref"><span class="normref">[RFC1808]</span></a>) are resolved to full URIs
using a base URI. RFC&nbsp;1808, section&nbsp;3, defines the normative
algorithm for this process. For CSS style sheets, the base URI is that
of the style sheet, not that of the source document.

<div class="example"><P style="display:none">Example(s):</P>
<P>For example, suppose the following rule:</p>

<PRE>
BODY { background: url("yellow") }
</PRE>

<P>is located in a style sheet designated by the URI:</p>

<PRE>http://www.myorg.org/style/basic.css</PRE>

<P>The background of the source document's BODY will be tiled with
whatever image is described by the resource designated
by the URI

<PRE>http://www.myorg.org/style/yellow</PRE>
</div>

<P>User agents may vary in how they handle URIs that designate
unavailable or inapplicable resources.

<H3>4.3.5 <a name="counter">Counters</a></h3>

<p><span class="index-def" title="&lt;counter&gt;, definition of"><a
name="value-def-counter">Counters</a></span> are denoted by
identifiers (see the <a href="generate.html#propdef-counter-increment" class="noxref"><span
class="propinst-counter-increment">'counter-increment'</span></a> and
<a href="generate.html#propdef-counter-reset" class="noxref"><span class="propinst-counter-reset">'counter-reset'</span></a>
properties). To refer to the value of a counter, the notation
<a name="x52"><span class="index-def" title="counter()">
'counter(&lt;identifier&gt;)'</span></a> or 'counter(&lt;identifier&gt;,
&lt;list-style-type&gt;)' is used.  The default style is 'decimal'.

<p>To refer to a sequence of nested counters of the same name, the
notation is 'counters(&lt;identifier&gt;, &lt;string&gt;)' or
'counters(&lt;identifier&gt;, &lt;string&gt;,
&lt;list-style-type&gt;)'. See <a href="generate.html#scope">"Nested
counters and scope"</a> in the chapter on <a
href="generate.html">generated content</a>.

<p>In CSS2, the values of counters can
only be referred to from the <a href="generate.html#propdef-content" class="noxref"><span
class="propinst-content">'content'</span></a> property. Note that 'none'
is a possible &lt;list-style-type&gt;: 'counter(x,
none)' yields an empty string.

<div class="example"><P style="display:none">Example(s):</P>
<p>Here is a style sheet that numbers paragraphs (P) for each chapter
(H1). The paragraphs are numbered with roman numerals, followed by a
period and a space:

<pre>
P {counter-increment: par-num}
H1 {counter-reset: par-num}
P:before {content: counter(par-num, upper-roman) ". "}
</pre>
</div>

<p>Counters that are not in the <a
href="generate.html#scope">scope</a> of any 'counter-reset', are
assumed to have been reset to 0 by a 'counter-reset' on the root
element.

<H3>4.3.6 <a name="color-units">Colors</a></H3>

A <span class="index-def" title="&lt;color&gt;::definition of"><a
name="value-def-color" class="value-def">&lt;color&gt;</a></span>
is either a keyword or a numerical RGB specification.

<P> The 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 defined in HTML 4.0
(<a href="refs.html#ref-HTML40" rel="biblioentry" class="noxref"><span class="informref">[HTML40]</span></a>). 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 <a
href="./ui.html#system-colors">system colors</a> for more information.