← Back to branch summary

~ubuntu-branches/ubuntu/raring/w3-recs/raring

« back to all changes in this revision

Viewing changes to www.w3.org/TR/2008/REC-CSS2-20080411/intro.html

  • Committer: Bazaar Package Importer
  • Author(s): Colin Darie, Stefano Zacchiroli, Colin Darie
  • Date: 2011-01-07 17:15:16 UTC
  • mfrom: (1.1.4 upstream) (1.2.2 sid)
  • Revision ID: james.westby@ubuntu.com-20110107171516-klmadnjiktybzswf
Tags: 20110107-1
http://bugs.debian.org/579786
http://bugs.debian.org/604968
[ Stefano Zacchiroli ]
* debian/TODO.Debian: add pending TODO items

[ Colin Darie ]
* New maintainer. (Closes: #579786)
* List of recommendations (REC) changes (Closes: #604968):
  - Associating Style Sheets with XML documents 1.0 (Second Edition)
    (updated 28/10/2010)
  - Device Description Repository Simple API (new 05/12/2008)
  - EMMA: Extensible MultiModal Annotation markup language
    (new 10/02/2009)
  - Element Traversal Specification (new 22/12/2008)
  - Extensible Markup Language (XML) 1.0 (Fifth Edition)
    (updated 26/11/2008)
  - Mobile Web Best Practices 1.0 (new 29/07/2008)
  - Namespaces in XML 1.0 (Third Edition) (updated 08/12/2009)
  - OWL 2 Web Ontology Language Conformance (new 27/10/2009)
  - OWL 2 Web Ontology Language Direct Semantics (new 27/10/2009)
  - OWL 2 Web Ontology Language Document Overview (new 27/10/2009)
  - OWL 2 Web Ontology Language Mapping to RDF Graphs (new 27/10/2009)
  - OWL 2 Web Ontology Language New Features and Rationale
    (new 27/10/2009)
  - OWL 2 Web Ontology Language Primer (new 27/10/2009)
  - OWL 2 Web Ontology Language Profiles (new 27/10/2009)
  - OWL 2 Web Ontology Language Quick Reference Guide (new 27/10/2009)
  - OWL 2 Web Ontology Language RDF-Based Semantics (new 27/10/2009)
  - OWL 2 Web Ontology Language Structural Specification and
    Functional-Style Syntax (new 27/10/2009)
  - OWL 2 Web Ontology Language XML Serialization (new 27/10/2009)
  - Pronunciation Lexicon Specification (PLS) Version 1.0
    (new 14/10/2008)
  - Protocol for Web Description Resources (POWDER): Description Resources
    (new 01/09/2009)
  - Protocol for Web Description Resources (POWDER): Formal Semantics
    (new 01/09/2009)
  - Protocol for Web Description Resources (POWDER): Grouping of Resources
    (new 01/09/2009)
  - RDFa in XHTML: Syntax and Processing (new 14/10/2008)
  - RIF Basic Logic Dialect (new 22/06/2010)
  - RIF Core Dialect (new 22/06/2010)
  - RIF Datatypes and Built-Ins 1.0 (new 22/06/2010)
  - RIF Framework for Logic Dialects (new 22/06/2010)
  - RIF Production Rule Dialect (new 22/06/2010)
  - RIF RDF and OWL Compatibility (new 22/06/2010)
  - SKOS Simple Knowledge Organization System Reference (new 18/08/2009)
  - Scalable Vector Graphics (SVG) Tiny 1.2 Specification
    (new 22/12/2008)
  - Service Modeling Language Interchange Format Version 1.1
    (new 12/05/2009)
  - Service Modeling Language, Version 1.1 (new 12/05/2009)
  - Speech Syn8hesis Markup Language (SSML) Version 1.1 (new 07/09/2010)
  - Synchronized Multimedia Integration Language (SMIL 3.0)
    (updated 01/12/2008)
  - W3C mobileOK Basic Tests 1.0 (new 08/12/2008)
  - Web Content Accessibility Guidelines (WCAG) 2.0 (new 11/12/2008)
  - Web Security Context: User Interface Guidelines (new 12/08/2010)
  - WebCGM 2.1 (new 01/03/2010)
  - XForms 1.1 (updated 20/10/2009)
  - XHTML-Print - Second Edition (new 23/11/2010)
  - XHTML™ 1.1 - Module-based XHTML (updated 07/10/2010)
  - XHTML™ Basic 1.1 - Second Edition (updated 07/10/2010)
  - XHTML™ Modularization 1.1 - Second Edition (new 29/07/2010)
  - XML Base (Second Edition) (updated 28/01/2009)
  - XML Entity Definitions for Characters (new 01/04/2010)
  - XML Linking Language (XLink) Version 1.1 (new 06/05/2010)
  - XML Path Language (XPath) 2.0 (Second Edition) (new 14/12/2010)
  - XML Syntax for XQuery 1.0 (XQueryX) (Second Edition) (new 14/12/2010)
  - XProc: An XML Pipeline Language (new 11/05/2010)
  - XQuery 1.0 and XPath 2.0 Data Model (XDM) (Second Edition)
    (updated 14/12/2010)
  - XQuery 1.0 and XPath 2.0 Formal Semantics (Second Edition)
    (updated 14/12/2010)
  - XQuery 1.0 and XPath 2.0 Functions and Operators (Second Edition)
    (updated 14/12/2010)
  - XQuery 1.0: An XML Query Language (Second Edition) (new 14/12/2010)
  - XSLT 2.0 and XQuery 1.0 Serialization (Second Edition)
    (updated 14/12/2010)
  - rdf:PlainLiteral: A Datatype for RDF Plain Literals (new 27/10/2009)
* From now, this package include PR and CR: added a NEWS entry about it
* List of PR and CR changes (some of them were previously included as REC):
  - A MathML for CSS Profile (new PR 10/08/2010)
  - CSS Color Module Level 3 (new PR 28/10/2010)
  - CSS Marquee Module Level 3 (new CR 05/12/2008)
  - CSS Mobile Profile 2.0 (new CR 10/12/2008)
  - CSS Multi-column Layout Module (new CR 17/12/2009)
  - CSS Namespaces Module (new CR 23/05/2008)
  - CSS Style Attributes (new CR 12/10/2010)
  - CSS TV Profile 1.0 (new CR 14/05/2003)
  - CSS3 Basic User Interface Module (new CR 11/05/2004)
  - CSS3 Ruby Module (new CR 14/05/2003)
  - Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
    (updated CR 23/04/2009)
  - Character Model for the World Wide Web 1.0: Resource Identifiers
    (new CR 22/11/2004)
  - Digital Signatures for Widgets (new CR 24/06/2010)
  - Efficient XML Interchange (EXI) Format 1.0 (new CR 08/12/2009)
  - Geolocation API Specification (new CR 07/09/2010)
  - Mathematical Markup Language (MathML) Version 3.0 (new PR 10/08/2010)
  - Media Queries (new CR 27/07/2010)
  - Mobile Web Application Best Practices (new PR 21/10/2010)
  - Selectors API Level 1 (new CR 22/12/2009)
  - Selectors Level 3 (new PR 15/12/2009)
  - The 'view-mode' Media Feature (new CR 24/06/2010)
  - Timed Text Markup Language (TTML) 1.0 (new PR 14/09/2010)
  - Voice Browser Call Control: CCXML Version 1.0 (new CR 01/04/2010)
  - W3C XML Schema Definition Language (XSD): Component Designators
    (new CR 19/01/2010)
  - Web Services Choreography Description Language Version 1.0
    (new CR 09/11/2005)
  - Widget Access Request Policy (new CR 20/04/2010)
  - XForms 1.0 Basic Profile (new CR 14/10/2003)
  - XML Binding Language (XBL) 2.0 (new CR 16/03/2007)
  - XML Fragment Interchange (new CR 12/02/2001)
  - XMLHttpRequest (new CR 03/08/2010)
  - XQuery Update Facility 1.0 (new CR 09/06/2009)
  - XQuery Update Facility 1.0 Requirements (new CR 14/03/2008)
  - XQuery Update Facility 1.0 Use Cases (new CR 14/03/2008)
  - XQuery and XPath Full Text 1.0 (new CR 28/01/2010)
* Bump Standard-Version to 3.9.1 (no changes required)
* debian/control.in
  - Converting repo from svn to git: update Vcs-* fields accordingly
  - Added Depends: ${misc:Depends} as recommended by debhelper
* debian/rules:
  - Redirect output of wget to a logfile
  - Ignore .jar extension
  - Exclude a javadoc/ directory: this would break the doc-base process
  - Added a fix-paths target because of broken links in the tr.rdf
  - Ignore error status returned by wget because of broken links,
    so the download target can be fully completed
  - wrap lines > 80 char in control-index.txt copied in debian/control to
    avoid lintian warnings
* Patches:
  - Switch to 3.0 (quilt) source format
  - Drop rec-dom2-html-url patch, no longer necessary
  - Add fix-link-REC-PICS-labels-961031.patch
  - Convert (and update) css-local-images.patch
* Clean up TODO.Debian
* debian/README.source: explicit the steps to build the package from git
* Added unapply-patches to debian/source/local-options

Show diffs side-by-side

added added

removed removed

Lines of Context:
www.w3.org/TR/2008/REC-CSS2-20080411/intro.html
1
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2
 
<html lang="en">
3
 
 
4
 
<HEAD>
5
 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
6
 
<TITLE>Introduction to CSS2</TITLE>
7
 
<link rel="stylesheet" href="style/default.css" type="text/css">
8
 
<link rel="prev" href="about.html">
9
 
<link rel="next" href="conform.html">
10
 
<link rel="contents" href="cover.html#minitoc">
11
 
<link rel="CSS-properties" href="propidx.html" title="properties">
12
 
<link rel="index" href="indexlist.html" title="index">
13
 
</HEAD>
14
 
<BODY>
15
 
<div class="navbar" align="center">
16
 
<p><a href="about.html">previous</a> &nbsp;
17
 
<a href="conform.html">next</a> &nbsp;
18
 
<a href="cover.html#minitoc">contents</a> &nbsp;
19
 
<a href="propidx.html">properties</a> &nbsp;
20
 
<a href="indexlist.html">index</a> &nbsp;
21
 
</div>
22
 
<hr class="navbar">
23
 
 
24
 
<H1 align="center">2 Introduction to CSS2</H1> 
25
 
<div class="subtoc">
26
 
<p><strong>Contents</strong>
27
 
  <ul class="toc">
28
 
    <li class="tocline2"><a href="intro.html#q1" class="tocxref">2.1 A brief CSS2 tutorial for HTML</a>
29
 
    <li class="tocline2"><a href="intro.html#q2" class="tocxref">2.2 A brief CSS2 tutorial for XML</a>
30
 
    <li class="tocline2"><a href="intro.html#processing-model" class="tocxref">2.3 The CSS2 processing model</a>
31
 
    <ul class="toc">
32
 
      <li class="tocline3"><a href="intro.html#q4" class="tocxref">2.3.1 The canvas</a>
33
 
      <li class="tocline3"><a href="intro.html#q5" class="tocxref">2.3.2 CSS2 addressing model</a>
34
 
    </ul>
35
 
    <li class="tocline2"><a href="intro.html#q6" class="tocxref">2.4 CSS design principles</a>
36
 
  </ul>
37
 
</div>
38
 
 
39
 
<H2><a name="q1">2.1 A brief CSS2 tutorial for HTML</a></H2>
40
 
 
41
 
<P> In this tutorial, we show how easy it can be to design simple
42
 
style sheets. For this tutorial, you will need to know a little HTML
43
 
(see <a href="refs.html#ref-HTML40" rel="biblioentry" class="noxref"><span class="informref">[HTML40]</span></a>) and some basic desktop publishing terminology.
44
 
 
45
 
<P>We begin with a small HTML document:</p>
46
 
 
47
 
<PRE class="html-example">
48
 
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
49
 
&lt;HTML&gt;
50
 
  &lt;HEAD&gt;
51
 
  &lt;TITLE&gt;Bach's home page&lt;/TITLE&gt;
52
 
  &lt;/HEAD&gt;
53
 
  &lt;BODY&gt;
54
 
    &lt;H1&gt;Bach's home page&lt;/H1&gt;
55
 
    &lt;P&gt;Johann Sebastian Bach was a prolific composer.
56
 
  &lt;/BODY&gt;
57
 
&lt;/HTML&gt;
58
 
</PRE>
59
 
 
60
 
<P>To set the text color of the H1 elements to blue, you can write the
61
 
following CSS rule:</P>
62
 
 
63
 
<PRE class="example">
64
 
  H1 { color: blue }
65
 
</PRE>
66
 
 
67
 
<P>A CSS rule consists of two main parts: <a
68
 
href="selector.html">selector</a> ('H1') and declaration ('color:
69
 
blue'). The declaration has two parts: property ('color') and value
70
 
('blue'). While the example above tries to influence only one of the
71
 
properties needed for rendering an HTML document, it qualifies as a
72
 
style sheet on its own. Combined with other style sheets (one
73
 
fundamental feature of CSS is that style sheets are combined) it will
74
 
determine the final presentation of the document.
75
 
 
76
 
<P> The HTML 4.0 specification defines how style sheet rules may be
77
 
specified for HTML documents: either within the HTML document, or via
78
 
an external style sheet. To put the style sheet into the document, use
79
 
the STYLE element:</p>
80
 
 
81
 
<PRE class="html-example">
82
 
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
83
 
&lt;HTML&gt;
84
 
  &lt;HEAD&gt;
85
 
  &lt;TITLE&gt;Bach's home page&lt;/TITLE&gt;
86
 
  &lt;STYLE type="text/css"&gt;
87
 
    H1 { color: blue }
88
 
  &lt;/STYLE&gt;
89
 
  &lt;/HEAD&gt;
90
 
  &lt;BODY&gt;
91
 
    &lt;H1&gt;Bach's home page&lt;/H1&gt;
92
 
    &lt;P&gt;Johann Sebastian Bach was a prolific composer.
93
 
  &lt;/BODY&gt;
94
 
&lt;/HTML&gt;
95
 
</PRE>
96
 
 
97
 
<P> For maximum flexibility, we recommend that authors specify
98
 
external style sheets; they may be changed without modifying the
99
 
source HTML document, and they may be shared among several
100
 
documents. To link to an external style sheet, you can use the LINK
101
 
element:</p>
102
 
 
103
 
<PRE class="html-example">
104
 
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
105
 
&lt;HTML&gt;
106
 
  &lt;HEAD&gt;
107
 
  &lt;TITLE&gt;Bach's home page&lt;/TITLE&gt;
108
 
  &lt;LINK rel="stylesheet" href="bach.css" type="text/css"&gt;
109
 
  &lt;/HEAD&gt;
110
 
  &lt;BODY&gt;
111
 
    &lt;H1&gt;Bach's home page&lt;/H1&gt;
112
 
    &lt;P&gt;Johann Sebastian Bach was a prolific composer.
113
 
  &lt;/BODY&gt;
114
 
&lt;/HTML&gt;
115
 
</PRE>
116
 
 
117
 
<P>The LINK element specifies:</p>
118
 
 
119
 
<ul>
120
 
<li> the type of link: to a "stylesheet".
121
 
<li> the location of the style sheet via the "ref" attribute. 
122
 
<li>the type of style sheet being linked: "text/css".
123
 
</ul>
124
 
 
125
 
<P>To show the close relationship between a style sheet and the
126
 
structured markup, we continue to use the STYLE element in this
127
 
tutorial. Let's add more colors:
128
 
 
129
 
<PRE class="html-example">
130
 
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
131
 
&lt;HTML&gt;
132
 
  &lt;HEAD&gt;
133
 
  &lt;TITLE&gt;Bach's home page&lt;/TITLE&gt;
134
 
  &lt;STYLE type="text/css"&gt;
135
 
    BODY { color: red }
136
 
    H1 { color: blue }
137
 
  &lt;/STYLE&gt;
138
 
  &lt;/HEAD&gt;
139
 
  &lt;BODY&gt;
140
 
    &lt;H1&gt;Bach's home page&lt;/H1&gt;
141
 
    &lt;P&gt;Johann Sebastian Bach was a prolific composer.
142
 
  &lt;/BODY&gt;
143
 
&lt;/HTML&gt;
144
 
</PRE>
145
 
 
146
 
<P>The style sheet now contains two rules: the first one sets the
147
 
color of the BODY element to 'red', while the second one sets the
148
 
color of the H1 element to 'blue'. Since no color value has been
149
 
specified for the P element, it will inherit the color from its parent
150
 
element, namely BODY. The H1 element is also a child element of BODY
151
 
but the second rule overrides the inherited value. In CSS there are
152
 
often such conflicts between different values, and this specification
153
 
describes how to resolve them. 
154
 
 
155
 
<P>CSS2 has more than 100 different properties, including <a href="colors.html#propdef-color" class="noxref"><span
156
 
class="propinst-color">'color'</span></a>. Let's look at some of the
157
 
others:
158
 
 
159
 
<PRE class="example">
160
 
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
161
 
&lt;HTML&gt;
162
 
  &lt;HEAD&gt;
163
 
  &lt;TITLE&gt;Bach's home page&lt;/TITLE&gt;
164
 
  &lt;STYLE type="text/css"&gt;
165
 
    BODY { 
166
 
      font-family: "Gill Sans", sans-serif;
167
 
      font-size: 12pt;
168
 
      margin: 3em; 
169
 
    }
170
 
  &lt;/STYLE&gt;
171
 
  &lt;/HEAD&gt;
172
 
  &lt;BODY&gt;
173
 
    &lt;H1&gt;Bach's home page&lt;/H1&gt;
174
 
    &lt;P&gt;Johann Sebastian Bach was a prolific composer.
175
 
  &lt;/BODY&gt;
176
 
&lt;/HTML&gt;
177
 
</PRE>
178
 
 
179
 
<P>The first thing to notice is that several declarations are grouped
180
 
within a block enclosed by curly braces ({...}), and separated by
181
 
semicolons, though the last declaration may also be followed by a
182
 
semicolon.
183
 
 
184
 
<P>The first declaration on the BODY element sets the font family to
185
 
"Gill Sans". If that font isn't available, the user agent (often
186
 
referred to as a "browser") will use the 'sans-serif' font family
187
 
which is one of five generic font families which all users agents
188
 
know. Child elements of BODY will inherit the value of the <a href="fonts.html#propdef-font-family" class="noxref"><span
189
 
class="propinst-font-family">'font-family'</span></a> property.
190
 
 
191
 
<P>The second declaration sets the font size of the BODY element to
192
 
12 points. The "point" unit is commonly used in print-based typography
193
 
to indicate font sizes and other length values. It's an example of an
194
 
absolute unit which does not scale relative to the environment. 
195
 
 
196
 
<P>The third declaration uses a relative unit which scales with regard
197
 
to its surroundings. The "em" unit refers to the font size of the
198
 
element. In this case the result is that the margins around the BODY
199
 
element are three times wider than the font size.
200
 
 
201
 
<H2><a name="q2">2.2 A brief CSS2 tutorial for XML</a></H2>
202
 
 
203
 
<P>CSS can be used with any structured document format, for example
204
 
with applications of the eXtensible Markup Language <a href="refs.html#ref-XML10" rel="biblioentry" class="noxref"><span class="informref">[XML10]</span></a>. In
205
 
fact, XML depends more on style sheets than HTML, since authors can
206
 
make up their own elements that user agents don't know how to
207
 
display.
208
 
 
209
 
<P>Here is a simple XML fragment:
210
 
 
211
 
<PRE class="xml-example">
212
 
&lt;ARTICLE&gt;
213
 
  &lt;HEADLINE&gt;Fredrick the Great meets Bach&lt;/HEADLINE&gt;
214
 
  &lt;AUTHOR&gt;Johann Nikolaus Forkel&lt;/AUTHOR&gt;
215
 
  &lt;PARA&gt;
216
 
    One evening, just as he was getting his 
217
 
    &lt;INSTRUMENT&gt;flute&lt;/INSTRUMENT&gt; ready and his
218
 
    musicians were assembled, an officer brought him a list of
219
 
    the strangers who had arrived.
220
 
  &lt;/PARA&gt;
221
 
&lt;/ARTICLE&gt;
222
 
</PRE>
223
 
 
224
 
<P>To display this fragment in a document-like fashion, we must first
225
 
declare which elements are inline-level (i.e., do not cause line breaks) and
226
 
which are block-level (i.e., cause line breaks). 
227
 
 
228
 
<PRE class="example">
229
 
INSTRUMENT { display: inline }
230
 
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
231
 
</PRE>
232
 
 
233
 
<P>The first rule declares INSTRUMENT to be inline and the second
234
 
rule, with its comma-separated list of selectors, declares all the
235
 
other elements to be block-level.
236
 
 
237
 
<P>One proposal for linking a style sheet to an XML document is to use
238
 
a processing instruction:
239
 
 
240
 
<PRE class="xml-example">
241
 
&lt;?XML:stylesheet type="text/css" href="bach.css"?&gt;
242
 
&lt;ARTICLE&gt;
243
 
  &lt;HEADLINE&gt;Fredrick the Great meets Bach&lt;/HEADLINE&gt;
244
 
  &lt;AUTHOR&gt;Johann Nikolaus Forkel&lt;/AUTHOR&gt;
245
 
  &lt;PARA&gt;
246
 
    One evening, just as he was getting his 
247
 
    &lt;INSTRUMENT&gt;flute&lt;/INSTRUMENT&gt; ready and his
248
 
    musicians were assembled, an officer brought him a list of
249
 
    the strangers who had arrived.
250
 
  &lt;/PARA&gt;
251
 
&lt;/ARTICLE&gt;
252
 
</PRE>
253
 
 
254
 
<P>A visual user agent could format the above example as:
255
 
 
256
 
<div class="figure">
257
 
<p><img src="images/bach1.gif" alt="Example rendering"><SPAN class="dlink">&nbsp;&nbsp;&nbsp;<A name="img-bach1" href="images/longdesc/bach1-desc.html" title="Long description for the first Bach/XML formatting example">[D]</A></SPAN>
258
 
</div>
259
 
 
260
 
<P>Notice that the word "flute" remains within the paragraph since it
261
 
is the content of the inline element INSTRUMENT.
262
 
 
263
 
<P>Still, the text isn't formatted the way you would expect. For
264
 
example, the headline font size should be larger than then rest of the
265
 
text, and you may want to display the author's name in italic:</P>
266
 
 
267
 
<PRE class="example">
268
 
INSTRUMENT { display: inline }
269
 
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
270
 
HEADLINE { font-size: 1.3em }
271
 
AUTHOR { font-style: italic }
272
 
ARTICLE, HEADLINE, AUTHOR, PARA { margin: 0.5em }
273
 
</PRE>
274
 
 
275
 
<P>A visual user agent could format the above example as:
276
 
 
277
 
<div class="figure">
278
 
<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>
279
 
</div>
280
 
 
281
 
<P>Adding more rules to the style sheet will allow you to further
282
 
improve the presentation of the document. 
283
 
 
284
 
<H2>2.3 <a name="processing-model">The CSS2 processing model</a></H2>
285
 
 
286
 
<P>This section presents one possible model of how user
287
 
agents that support CSS work. This is only a conceptual model; real
288
 
implementations may vary.
289
 
 
290
 
<P>In this model, a user agent processes a source
291
 
by going through the following steps:</P>
292
 
 
293
 
<ol>
294
 
<li>Parse the source document and create a <a
295
 
href="conform.html#doctree">document tree</a>.</li>
296
 
 
297
 
<li>Identify the target <a href="media.html">media type</a>.
298
 
 
299
 
<li>Retrieve all style sheets associated with the document that are
300
 
specified for the target <a href="media.html">media type</a>.
301
 
 
302
 
<li>Annotate every element of the document tree by assigning a single
303
 
value to every <a href="syndata.html#properties">property</a> that is
304
 
applicable to the target <a href="media.html">media type</a>.
305
 
Properties are assigned values according to the mechanisms described
306
 
in the section on <a href="cascade.html">cascading and
307
 
inheritance</a>. 
308
 
 
309
 
<P>Part of the calculation of values depends on the formatting
310
 
algorithm appropriate for the target <a href="media.html">media
311
 
type</a>. For example, if the target medium is the screen, user agents
312
 
apply the <a href="visuren.html">visual formatting model</a>. If the
313
 
destination medium is the printed page, user agents apply the <a
314
 
href="page.html#page-model">page model</a>. If the destination medium
315
 
is an aural rendering device (e.g., speech synthesizer), user agents
316
 
apply the <a href="aural.html">aural rendering model</a>.
317
 
 
318
 
<li>From the annotated document tree, generate a 
319
 
<span class="index-def" title="formatting structure">
320
 
<a name="formatting-structure"><dfn>formatting
321
 
structure</dfn></a></span>.  Often, the formatting structure closely
322
 
resembles the document tree, but it may also differ significantly,
323
 
notably when authors make use of pseudo-elements and generated content.
324
 
First, the formatting structure need not be "tree-shaped" at all -- the
325
 
nature of the structure depends on the implementation.  Second, the
326
 
formatting structure may contain more or less information than the
327
 
document tree. For instance, if an element in the document tree has a
328
 
value of 'none' for the <a href="visuren.html#propdef-display" class="noxref"><span
329
 
class="propinst-display">'display'</span></a> property, that element will
330
 
generate nothing in the formatting structure.  A list element, on the
331
 
other hand, may generate more information in the formatting structure:
332
 
the list element's content and list style information (e.g., a bullet
333
 
image).
334
 
 
335
 
<P>Note that the CSS user agent does not alter the document tree
336
 
during this phase. In particular, content generated due to style
337
 
sheets is not fed back to the document language processor (e.g., for
338
 
reparsing).
339
 
 
340
 
<li>Transfer the formatting structure to the target medium (e.g., print
341
 
the results, display them on the screen, render them as speech,
342
 
etc.).
343
 
</ol>
344
 
 
345
 
<P>Step 1 lies outside the scope of this specification (see, for
346
 
example, <a href="refs.html#ref-DOM" rel="biblioentry" class="noxref"><span class="informref">[DOM]</span></a>).
347
 
 
348
 
<P>Steps 2-5 are addressed by the bulk of this specification.
349
 
 
350
 
<P>Step 6 lies outside the scope of this specification.</p>
351
 
 
352
 
<h3><a name="q4">2.3.1 The canvas</a></h3>
353
 
 
354
 
<P>For all media, the term <span class="index-def" title="canvas"> <a
355
 
name="canvas"><dfn>canvas</dfn></a></span> describes "the space where
356
 
the formatting structure is rendered."  The canvas is infinite for each
357
 
dimension of the space, but rendering generally occurs within
358
 
a finite region of the canvas, established by the user agent
359
 
according to the target medium. For instance, user agents rendering
360
 
to a screen generally impose a minimum width and choose an initial
361
 
width based on the dimensions of the <a href="visuren.html#viewport">
362
 
viewport</a>. User agents rendering to a page generally impose
363
 
width and height constraints. Aural user agents may impose limits
364
 
in audio space, but not in time. 
365
 
 
366
 
<h3><a name="q5">2.3.2 CSS2 addressing model</a></h3>
367
 
 
368
 
<P> CSS2 <a href="selector.html">selectors</a> and properties allow
369
 
style sheets to refer to the following parts of a document
370
 
or user agent:</p>
371
 
 
372
 
<ul>
373
 
<li>Elements in the document tree and certain relationships between
374
 
them (see the section on <a href="selector.html">selectors</a>).
375
 
 
376
 
<li>Attributes of elements in the document tree, and values of those
377
 
attributes (see the section on <a
378
 
href="selector.html#attribute-selectors">attribute selectors</a>).
379
 
 
380
 
<li>Some parts of element content (see the <a
381
 
href="selector.html#first-line">:first-line</a> and <a
382
 
href="selector.html#first-letter">:first-letter</a> pseudo-elements.
383
 
 
384
 
<li>Elements of the document tree when they are in a certain state
385
 
(see the section on <a href="selector.html#pseudo-classes">pseudo-classes</a>).
386
 
 
387
 
<li>Some aspects of the <a href="intro.html#canvas">canvas</a> where
388
 
the document will be rendered.
389
 
 
390
 
<li>Some system information (see the section on <a href="ui.html">user
391
 
interface</a>).
392
 
</ul>
393
 
 
394
 
<H2><a name="q6">2.4 CSS design principles</a></H2>
395
 
 
396
 
<P>CSS2, as CSS1 before it, is based on a set of design principles:</p>
397
 
 
398
 
 
399
 
<UL>
400
 
 
401
 
<LI>
402
 
<P><STRONG>Forward and backward compatibility</STRONG>. CSS2 user
403
 
agents will be able to understand CSS1 style sheets. CSS1 user agents
404
 
will be able to read CSS2 style sheets and discard parts they don't
405
 
understand. Also, user agents with no CSS support will be able to
406
 
display style-enhanced documents. Of course, the stylistic
407
 
enhancements made possible by CSS will not be rendered, but all
408
 
content will be presented.</P>
409
 
</LI>
410
 
 
411
 
<LI>
412
 
<P><STRONG>Complementary to structured documents</STRONG>. Style
413
 
sheets complement structured documents (e.g., HTML and XML
414
 
applications), providing
415
 
stylistic information for the marked-up text. It should be easy to
416
 
change the style sheet with little or no impact on the markup.</P>
417
 
</LI>
418
 
 
419
 
<LI>
420
 
<P><STRONG>Vendor, platform, and device independence</STRONG>. Style
421
 
sheets enable documents to remain vendor, platform, and device
422
 
independent. Style sheets themselves are also vendor and platform
423
 
independent, but CSS2 allows you to target a style sheet for a group of
424
 
devices (e.g., printers).</P>
425
 
</LI>
426
 
 
427
 
<LI>
428
 
<P><STRONG>Maintainability</STRONG>. By pointing to style sheets from
429
 
documents, webmasters can simplify site maintenance and retain
430
 
consistent look and feel throughout the site. For example, if
431
 
the organization's background color changes, only one file needs to be
432
 
changed.</P>
433
 
</LI>
434
 
 
435
 
<LI>
436
 
<P><STRONG>Simplicity</STRONG>. CSS2 is more complex than CSS1, but
437
 
it remains a simple style language which is human readable and
438
 
writable. The CSS properties are kept independent of each other to the
439
 
largest extent possible and there is generally only one way to achieve a
440
 
certain effect.</P>
441
 
</LI>
442
 
 
443
 
<LI> 
444
 
<P><STRONG>Network performance</STRONG>. CSS provides for compact
445
 
encodings of how to present content. Compared to images or audio
446
 
files, which are often used by authors to achieve certain rendering
447
 
effects, style sheets most often decrease the content size. Also,
448
 
fewer network connections have to be opened which further increases
449
 
network performance.</P> </LI>
450
 
 
451
 
<LI>
452
 
<P><STRONG>Flexibility</STRONG>. CSS can be applied to content in
453
 
several ways. The key feature is the ability to cascade style
454
 
information specified in the default (user agent) style sheet, user
455
 
style sheets, linked style sheets, the document head, and in
456
 
attributes for the elements forming the document body.</P>
457
 
</LI>
458
 
 
459
 
<LI>
460
 
<P><STRONG>Richness</STRONG>. Providing authors with a rich set of
461
 
rendering effects increases the richness of the Web as a medium of
462
 
expression. Designers have been longing for functionality commonly
463
 
found in desktop publishing and slide-show applications. Some of
464
 
the requested rendering effects conflict with device independence, but
465
 
CSS2 goes a long way toward granting designers their requests.</P>
466
 
</LI>
467
 
 
468
 
<LI>
469
 
<P><STRONG>Alternative language bindings</STRONG>. The set of CSS
470
 
properties described in this specification form a consistent
471
 
formatting model for visual and aural presentations. This formatting
472
 
model can be accessed through the CSS language, but bindings to other
473
 
languages are also possible. For example, a JavaScript program may
474
 
dynamically change the value of a certain element's <a href="colors.html#propdef-color" class="noxref"><span
475
 
class="propinst-color">'color'</span></a> property.</P>
476
 
</LI>
477
 
 
478
 
<LI>
479
 
<P><STRONG>Accessibility</STRONG>. Several CSS 
480
 
features will make the Web more accessible 
481
 
to users with disabilities:</p>
482
 
 
483
 
<UL>
484
 
<LI>Properties to control font appearance allow authors
485
 
to eliminate inaccessible bit-mapped text images. 
486
 
<li>Positioning properties allow authors to eliminate
487
 
mark-up tricks (e.g., invisible images) to force layout.
488
 
<LI>The semantics of
489
 
<tt>!important</tt> rules mean that users with 
490
 
particular presentation requirements
491
 
can override the author's style sheets.
492
 
<li>The new 'inherit' value for all properties
493
 
improves cascading generality and allows for
494
 
easier and more consistent style tuning.
495
 
<li>Improved media support, including media groups and the 
496
 
braille, embossed, and tty media types, will allow users and
497
 
authors to tailor pages to those devices.
498
 
<LI>Aural properties give control over voice and audio output.
499
 
<LI>The attribute
500
 
selectors, 'attr()' function,
501
 
and 'content' property give access to alternate content.
502
 
<LI>Counters and section/paragraph numbering can improve
503
 
document navigability and save on indenting spacing
504
 
(important for braille devices). The 'word-spacing' and
505
 
'text-indent' properties also eliminate the need
506
 
for extra whitespace in the document.
507
 
</UL>
508
 
 
509
 
<div class="note"><P> <em><strong>Note.</strong> For more information
510
 
about designing accessible documents using CSS and HTML, please
511
 
consult <a href="refs.html#ref-WAI-PAGEAUTH" rel="biblioentry" class="noxref"><span class="informref">[WAI-PAGEAUTH]</span></a>.</em>
512
 
</div>
513
 
</UL>
514
 
 
515
 
 
516
 
<hr class="navbar">
517
 
 
518
 
<div class="navbar" align="center">
519
 
<p><a href="about.html">previous</a> &nbsp;
520
 
<a href="conform.html">next</a> &nbsp;
521
 
<a href="cover.html#minitoc">contents</a> &nbsp;
522
 
<a href="propidx.html">properties</a> &nbsp;
523
 
<a href="indexlist.html">index</a> &nbsp;
524
 
</div>
525
 
</BODY>
526
 
</HTML>
527