intro.html

CSS lets learn this step by step...

text, and you may want to display the author's name in italic:</P>

<PRE class="example">
INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
HEADLINE { font-size: 1.3em }
AUTHOR { font-style: italic }
ARTICLE, HEADLINE, AUTHOR, PARA { margin: 0.5em }
</PRE>

<P>A visual user agent could format the above example as:

<div class="figure">
<p><img src="images/bach2.gif" alt="Example rendering"><SPAN class="dlink">&nbsp;&nbsp;&nbsp;<A name="img-bach2" href="images/longdesc/bach2-desc.html" title="Long description for the second Bach/XML formatting example">[D]</A></SPAN>
</div>

<P>Adding more rules to the style sheet will allow you to further
improve the presentation of the document. 

<H2>2.3 <a name="processing-model">The CSS2 processing model</a></H2>

<P>This section presents one possible model of how user
agents that support CSS work. This is only a conceptual model; real
implementations may vary.

<P>In this model, a user agent processes a source
by going through the following steps:</P>

<ol>
<li>Parse the source document and create a <a
href="conform.html#doctree">document tree</a>.</li>

<li>Identify the target <a href="media.html">media type</a>.

<li>Retrieve all style sheets associated with the document that are
specified for the target <a href="media.html">media type</a>.

<li>Annotate every element of the document tree by assigning a single
value to every <a href="syndata.html#properties">property</a> that is
applicable to the target <a href="media.html">media type</a>.
Properties are assigned values according to the mechanisms described
in the section on <a href="cascade.html">cascading and
inheritance</a>. 

<P>Part of the calculation of values depends on the formatting
algorithm appropriate for the target <a href="media.html">media
type</a>. For example, if the target medium is the screen, user agents
apply the <a href="visuren.html">visual formatting model</a>. If the
destination medium is the printed page, user agents apply the <a
href="page.html#page-model">page model</a>. If the destination medium
is an aural rendering device (e.g., speech synthesizer), user agents
apply the <a href="aural.html">aural rendering model</a>.

<li>From the annotated document tree, generate a 
<span class="index-def" title="formatting structure">
<a name="formatting-structure"><dfn>formatting
structure</dfn></a></span>.  Often, the formatting structure closely
resembles the document tree, but it may also differ significantly,
notably when authors make use of pseudo-elements and generated content.
First, the formatting structure need not be "tree-shaped" at all -- the
nature of the structure depends on the implementation.  Second, the
formatting structure may contain more or less information than the
document tree. For instance, if an element in the document tree has a
value of 'none' for the <a href="visuren.html#propdef-display" class="noxref"><span
class="propinst-display">'display'</span></a> property, that element will
generate nothing in the formatting structure.  A list element, on the
other hand, may generate more information in the formatting structure:
the list element's content and list style information (e.g., a bullet
image).

<P>Note that the CSS user agent does not alter the document tree
during this phase. In particular, content generated due to style
sheets is not fed back to the document language processor (e.g., for
reparsing).

<li>Transfer the formatting structure to the target medium (e.g., print
the results, display them on the screen, render them as speech,
etc.).
</ol>

<P>Step 1 lies outside the scope of this specification (see, for
example, <a href="refs.html#ref-DOM" rel="biblioentry" class="noxref"><span class="informref">[DOM]</span></a>).

<P>Steps 2-5 are addressed by the bulk of this specification.

<P>Step 6 lies outside the scope of this specification.</p>

<h3><a name="q4">2.3.1 The canvas</a></h3>

<P>For all media, the term <span class="index-def" title="canvas"> <a
name="canvas"><dfn>canvas</dfn></a></span> describes "the space where
the formatting structure is rendered."  The canvas is infinite for each
dimension of the space, but rendering generally occurs within
a finite region of the canvas, established by the user agent
according to the target medium. For instance, user agents rendering
to a screen generally impose a minimum width and choose an initial
width based on the dimensions of the <a href="visuren.html#viewport">
viewport</a>. User agents rendering to a page generally impose
width and height constraints. Aural user agents may impose limits
in audio space, but not in time. 

<h3><a name="q5">2.3.2 CSS2 addressing model</a></h3>

<P> CSS2 <a href="selector.html">selectors</a> and properties allow
style sheets to refer to the following parts of a document
or user agent:</p>

<ul>
<li>Elements in the document tree and certain relationships between
them (see the section on <a href="selector.html">selectors</a>).

<li>Attributes of elements in the document tree, and values of those
attributes (see the section on <a
href="selector.html#attribute-selectors">attribute selectors</a>).

<li>Some parts of element content (see the <a
href="selector.html#first-line">:first-line</a> and <a
href="selector.html#first-letter">:first-letter</a> pseudo-elements.

<li>Elements of the document tree when they are in a certain state
(see the section on <a href="selector.html#pseudo-classes">pseudo-classes</a>).

<li>Some aspects of the <a href="#canvas">canvas</a> where
the document will be rendered.

<li>Some system information (see the section on <a href="ui.html">user
interface</a>).
</ul>

<H2><a name="q6">2.4 CSS design principles</a></H2>

<P>CSS2, as CSS1 before it, is based on a set of design principles:</p>


<UL>

<LI>
<P><STRONG>Forward and backward compatibility</STRONG>. CSS2 user
agents will be able to understand CSS1 style sheets. CSS1 user agents
will be able to read CSS2 style sheets and discard parts they don't
understand. Also, user agents with no CSS support will be able to
display style-enhanced documents. Of course, the stylistic
enhancements made possible by CSS will not be rendered, but all
content will be presented.</P>
</LI>

<LI>
<P><STRONG>Complementary to structured documents</STRONG>. Style
sheets complement structured documents (e.g., HTML and XML
applications), providing
stylistic information for the marked-up text. It should be easy to
change the style sheet with little or no impact on the markup.</P>
</LI>

<LI>
<P><STRONG>Vendor, platform, and device independence</STRONG>. Style
sheets enable documents to remain vendor, platform, and device
independent. Style sheets themselves are also vendor and platform
independent, but CSS2 allows you to target a style sheet for a group of
devices (e.g., printers).</P>
</LI>

<LI>
<P><STRONG>Maintainability</STRONG>. By pointing to style sheets from
documents, webmasters can simplify site maintenance and retain
consistent look and feel throughout the site. For example, if
the organization's background color changes, only one file needs to be
changed.</P>
</LI>

<LI>
<P><STRONG>Simplicity</STRONG>. CSS2 is more complex than CSS1, but
it remains a simple style language which is human readable and
writable. The CSS properties are kept independent of each other to the
largest extent possible and there is generally only one way to achieve a
certain effect.</P>
</LI>

<LI> 
<P><STRONG>Network performance</STRONG>. CSS provides for compact
encodings of how to present content. Compared to images or audio
files, which are often used by authors to achieve certain rendering
effects, style sheets most often decrease the content size. Also,
fewer network connections have to be opened which further increases
network performance.</P> </LI>

<LI>
<P><STRONG>Flexibility</STRONG>. CSS can be applied to content in
several ways. The key feature is the ability to cascade style
information specified in the default (user agent) style sheet, user
style sheets, linked style sheets, the document head, and in
attributes for the elements forming the document body.</P>
</LI>

<LI>
<P><STRONG>Richness</STRONG>. Providing authors with a rich set of
rendering effects increases the richness of the Web as a medium of
expression. Designers have been longing for functionality commonly
found in desktop publishing and slide-show applications. Some of
the requested rendering effects conflict with device independence, but
CSS2 goes a long way toward granting designers their requests.</P>
</LI>

<LI>
<P><STRONG>Alternative language bindings</STRONG>. The set of CSS
properties described in this specification form a consistent
formatting model for visual and aural presentations. This formatting
model can be accessed through the CSS language, but bindings to other
languages are also possible. For example, a JavaScript program may
dynamically change the value of a certain element's <a href="colors.html#propdef-color" class="noxref"><span
class="propinst-color">'color'</span></a> property.</P>
</LI>

<LI>
<P><STRONG>Accessibility</STRONG>. Several CSS 
features will make the Web more accessible 
to users with disabilities:</p>

<UL>
<LI>Properties to control font appearance allow authors
to eliminate inaccessible bit-mapped text images. 
<li>Positioning properties allow authors to eliminate
mark-up tricks (e.g., invisible images) to force layout.
<LI>The semantics of
<tt>!important</tt> rules mean that users with 
particular presentation requirements
can override the author's style sheets.
<li>The new 'inherit' value for all properties
improves cascading generality and allows for
easier and more consistent style tuning.
<li>Improved media support, including media groups and the 
braille, embossed, and tty media types, will allow users and
authors to tailor pages to those devices.
<LI>Aural properties give control over voice and audio output.
<LI>The attribute
selectors, 'attr()' function,
and 'content' property give access to alternate content.
<LI>Counters and section/paragraph numbering can improve
document navigability and save on indenting spacing
(important for braille devices). The 'word-spacing' and
'text-indent' properties also eliminate the need
for extra whitespace in the document.
</UL>

<div class="note"><P> <em><strong>Note.</strong> For more information
about designing accessible documents using CSS and HTML, please
consult <a href="refs.html#ref-WAI-PAGEAUTH" rel="biblioentry" class="noxref"><span class="informref">[WAI-PAGEAUTH]</span></a>.</em>
</div>
</UL>


<hr class="navbar">

<div class="navbar" align="center">
<p><a href="about.html">previous</a> &nbsp;
<a href="conform.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>