-
Notifications
You must be signed in to change notification settings - Fork 790
Expand file tree
/
Copy pathintro.html
More file actions
526 lines (434 loc) · 22.6 KB
/
intro.html
File metadata and controls
526 lines (434 loc) · 22.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
10000
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<HEAD>
<TITLE>Introduction to <del>CSS2</del><ins>CSS 2.1</ins></TITLE>
<link rel="stylesheet" href="style/default.css" type="text/css">
<link rel="stylesheet" href="http://www.w3.org/StyleSheets/TR/W3C-MO.css" type="text/css">
<link rel="prev" href="about.html">
<link rel="next" href="conform.html">
<link rel="contents" href="cover.html#minitoc">
<link rel="CSS-properties" href="propidx.html" title="properties">
<link rel="index" href="indexlist.html" title="index">
<link rel="first" href="cover.html">
</HEAD>
<BODY>
<div class="navbar">
<p><a href="about.html">previous</a>
<a href="conform.html">next</a>
<a href="cover.html#minitoc">contents</a>
<a href="propidx.html">properties</a>
<a href="indexlist.html">index</a>
</div>
<hr class="navbar">
<H1><a name="q0">2 Introduction to <del>CSS2</del><ins>CSS 2.1</ins></a></H1>
<div class="subtoc">
<p><strong>Contents</strong>
<ul class="toc">
<li class="tocline2"><a href="intro.html#html-tutorial" class="tocxref">2.1 A brief <del>CSS2</del><ins>CSS 2.1</ins> tutorial for HTML</a>
<li class="tocline2"><a href="intro.html#xml-tutorial" class="tocxref">2.2 A brief <del>CSS2</del><ins>CSS 2.1</ins> tutorial for XML</a>
<li class="tocline2"><a href="intro.html#processing-model" class="tocxref">2.3 The <del>CSS2</del><ins>CSS 2.1</ins> processing model</a>
<ul class="toc">
<li class="tocline3"><a href="intro.html#the-canvas" class="tocxref">2.3.1 The canvas</a>
<li class="tocline3"><a href="intro.html#addressing" class="tocxref">2.3.2 <del>CSS2</del><ins>CSS 2.1</ins> addressing model</a>
</ul>
<li class="tocline2"><a href="intro.html#design-principles" class="tocxref">2.4 CSS design principles</a>
</ul>
</div>
<H2>2.1 <a name="html-tutorial">A brief <del>CSS2</del><ins>CSS 2.1</ins> tutorial for HTML</a></H2>
<p><ins>This section is non-normative.</ins>
<P> In this tutorial, we show how easy it can be to design simple
style sheets. For this tutorial, you will need to know a little HTML
(see <a href="refs.html#ref-HTML4" rel="biblioentry" class="noxref"><span class="informref"> <del>[HTML40]</del><ins>[HTML4]</ins></span></a>) and some basic desktop publishing terminology.
<P>We begin with a small HTML document:</p>
<PRE class="html-example">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML <del>4.0//EN"></del><ins>4.01//EN"></ins>
<HTML>
<HEAD>
<TITLE>Bach's home page</TITLE>
</HEAD>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a prolific composer.
</BODY>
</HTML>
</PRE>
<P>To set the text color of the H1 elements to <del>blue,</del><ins>red,</ins> you can write the
following CSS <del>rule:</del><ins>rules:</ins></P>
<PRE class="example">
h1 { color: <del>blue</del><ins>red</ins> }
</PRE>
<P>A CSS rule consists of two main parts: <a
href="selector.html">selector</a> ('h1') and declaration
<del>('color: blue').</del><ins>('color: red'). In HTML, element names are case-insensitive so
'h1' works just as well as 'H1'.</ins> The declaration has two parts:
property <ins>name</ins> ('color') and <ins>property</ins> value <del>('blue').</del><ins>('red').</ins> While the example above tries to
influence only one of the properties needed for rendering an HTML
document, it qualifies as a style sheet on its own. Combined with
other style sheets (one fundamental feature of CSS is that style
sheets are <del>combined) it</del><ins>combined), the rule</ins> will determine the final presentation of the
document.
<P> The HTML <del>4.0</del><ins>4</ins> specification defines how style sheet rules may be
specified for HTML documents: either within the HTML document, or via
an external style sheet. To put the style sheet into the document, use
the STYLE element:</p>
<PRE class="html-example">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML <del>4.0//EN"></del><ins>4.01//EN"></ins>
<HTML>
<HEAD>
<TITLE>Bach's home page</TITLE>
<STYLE type="text/css">
h1 { color: <del>blue</del><ins>red</ins> }
</STYLE>
</HEAD>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a prolific composer.
</BODY>
</HTML>
</PRE>
<P> For maximum flexibility, we recommend that authors specify
external style sheets; they may be changed without modifying the
source HTML document, and they may be shared among several
documents. To link to an external style sheet, you can use the LINK
element:</p>
<PRE class="html-example">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML <del>4.0//EN"></del><ins>4.01//EN"></ins>
<HTML>
<HEAD>
<TITLE>Bach's home page</TITLE>
<LINK rel="stylesheet" href="bach.css" type="text/css">
</HEAD>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a prolific composer.
</BODY>
</HTML>
</PRE>
<P>The LINK element specifies:</p>
<ul>
<li>the type of link: to a "stylesheet".
<li>the location of the style sheet via the <del>"ref"</del><ins>"href"</ins> attribute.
<li>the type of style sheet being linked: "text/css".
</ul>
<P>To show the close relationship between a style sheet and the
structured markup, we continue to use the STYLE element in this
tutorial. Let's add more colors:
<PRE class="html-example">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML <del>4.0//EN"></del><ins>4.01//EN"></ins>
<HTML>
<HEAD>
<TITLE>Bach's home page</TITLE>
<STYLE type="text/css">
body { color: <del>red</del><ins>black; background: white</ins> }
h1 { color: <del>blue</del><ins>red; background: white</ins> }
</STYLE>
</HEAD>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a prolific composer.
</BODY>
</HTML>
</PRE>
<P>The style sheet now contains <del>two</del><ins>four</ins> rules: the first <del>one sets</del><ins>two set</ins> the
color <ins>and background</ins> of the BODY element <ins>(it's a good idea</ins> to <del>'red',</del><ins>set the
text color and background color together),</ins> while the <del>second one sets</del><ins>last two
set</ins> the color <ins>and the background</ins> of the H1 <del>element to 'blue'.</del><ins>element.</ins> Since no color
<del>value</del>has been specified for the P element, it will inherit the color
from its parent element, namely BODY. The H1 element is also a child
element of BODY but the second rule overrides the inherited value. In
CSS there are often such conflicts between different values, and this
specification describes how to resolve them.
<P> <del>CSS2</del><ins>CSS 2.1</ins> has more than <del>100 different</del><ins>90</ins> properties, including <a href="colors.html#propdef-color" class="noxref"><span
class="propinst-color">'color'</span></a>. Let's look at some of the
others:
<PRE class="example">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML <del>4.0//EN"></del><ins>4.01//EN"></ins>
<HTML>
<HEAD>
<TITLE>Bach's home page</TITLE>
<STYLE type="text/css">
body {
font-family: "Gill Sans", sans-serif;
font-size: 12pt;
margin: 3em;
}
</STYLE>
</HEAD>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a prolific composer.
</BODY>
</HTML>
</PRE>
<P>The first thing to notice is that several declarations are grouped
within a block enclosed by curly braces ({...}), and separated by
semicolons, though the last declaration may also be followed by a
semicolon.
<P>The first declaration on the BODY element sets the font family to
"Gill Sans". If that font <del>isn't</del><ins>is not</ins> available, the user agent (often
referred to as a "browser") will use the 'sans-serif' font family
which is one of five generic font families which all users agents
know. Child elements of BODY will inherit the value of the <a href="fonts.html#propdef-font-family" class="noxref"><span
class="propinst-font-family">'font-family'</span></a> property.
<P>The second declaration sets the font size of the BODY element to
12 points. The "point" unit is commonly used in print-based typography
to indicate font sizes and other length values. It's an example of an
absolute unit which does not scale relative to the environment.
<P>The third declaration uses a relative unit which scales with regard
to its surroundings. The "em" unit refers to the font size of the
element. In this case the result is that the margins around the BODY
element are three times wider than the font size.
<H2>2.2 <a name="xml-tutorial">A brief <del>CSS2</del><ins>CSS 2.1</ins> tutorial for XML</a></H2>
<p><ins>This section is non-normative.</ins>
<P>CSS can be used with any structured document format, for example
with applications of the eXtensible Markup Language <a href="refs.html#ref-XML10" rel="biblioentry" class="noxref"><span class="informref">[XML10]</span></a>. In
fact, XML depends more on style sheets than HTML, since authors can
make up their own elements that user agents <del>don't</del><ins>do not</ins> know how to
display.
<P>Here is a simple XML fragment:
<PRE class="xml-example">
<ARTICLE>
<HEADLINE>Fredrick the Great meets Bach</HEADLINE>
<AUTHOR>Johann Nikolaus Forkel</AUTHOR>
<PARA>
One evening, just as he was getting his
<INSTRUMENT>flute</INSTRUMENT> ready and his
musicians were assembled, an officer brought him a list of
the strangers who had arrived.
</PARA>
</ARTICLE>
</PRE>
<P>To display this fragment in a document-like fashion, we must first
declare which elements are inline-level (i.e., do not cause line breaks) and
which are block-level (i.e., cause line breaks).
<PRE class="example">
INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
</PRE>
<P>The first rule declares INSTRUMENT to be inline and the second
rule, with its comma-separated list of selectors, declares all the
other elements to be block-level. <ins>Element names in XML are
case-sensitive, so a selector written in lowercase (e.g., 'instrument')
is different from uppercase (e.g., 'INSTRUMENT').</ins>
<P>One <del>proposal for</del><ins>way of</ins> linking a style sheet to an XML document is to use
a processing instruction:
<PRE class="xml-example">
<del><?XML:stylesheet</del><ins><?xml-stylesheet</ins> type="text/css" href="bach.css"?>
<ARTICLE>
<HEADLINE>Fredrick the Great meets Bach</HEADLINE>
<AUTHOR>Johann Nikolaus Forkel</AUTHOR>
<PARA>
One evening, just as he was getting his
<INSTRUMENT>flute</INSTRUMENT> ready and his
musicians were assembled, an officer brought him a list of
the strangers who had arrived.
</PARA>
</ARTICLE>
</PRE>
<P>A visual user agent could format the above example as:
<div class="figure">
<p><img src="images/bach1.png" alt="Example rendering"><SPAN class="dlink"> <A name="img-bach1" href="images/longdesc/bach1-desc.html" title="Long description for the first Bach/XML formatting example">[D]</A></SPAN>
</div>
<P>Notice that the word "flute" remains within the paragraph since it
is the content of the inline element INSTRUMENT.
<P>Still, the text <del>isn't</del><ins>is not</ins> formatted the way you would expect. For
example, the headline font size should be larger than then <ins>the</ins> rest of
the 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.png" alt="Example rendering"><SPAN class="dlink"> <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
<del>improve</del><ins>describe</ins> the presentation of the document.
<H2>2.3 <a name="processing-model">The <del>CSS2</del><ins>CSS 2.1</ins> processing model</a></H2>
<p>This section <ins>up to but not including its subsections is
non-normative.</ins>
<P><ins>This section</ins> 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>.
<li> <del>If the destination medium is the printed page, user agents apply the page model . If the destination medium is an aural rendering device (e.g., speech synthesizer), user agents apply the aural rendering model .</del>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>
<h3> <del>Step 1 lies outside the scope of this specification (see, for example, [DOM] ). Steps 2-5 are addressed by the bulk of this specification. Step 6 lies outside the scope of this specification.</del>2.3.1 <a name="the-canvas">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>2.3.2 <a name="addressing"> <del>CSS2</del><ins>CSS 2.1</ins> addressing model</a></h3>
<P> <del>CSS2</del><ins>CSS 2.1</ins> <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> <del>pseudo-elements.</del><ins>pseudo-elements).</ins>
<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 th
D5B
e section on <a href="ui.html">user
interface</a>).
</ul>
<H2>2.4 <a name="design-principles">CSS design principles</a></H2>
<p> <del>CSS2,</del><ins>This section is non-normative.</ins>
<P><ins>CSS 2.1,</ins> as <ins>CSS2 and</ins> CSS1 before it, is based on a set of design principles:</p>
<UL>
<LI>
<P><STRONG>Forward and backward compatibility</STRONG>
ADD3
;. <del>CSS2</del><ins>CSS 2.1</ins> user
agents will be able to understand CSS1 style sheets. CSS1 user agents
will be able to read <del>CSS2</del><ins>CSS 2.1</ins> style sheets and discard parts they <del>don't</del><ins>do not</ins>
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 <del>CSS2</del><ins>CSS 2.1</ins> 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>. <del>CSS2</del><ins>CSS</ins> is <del>more complex than CSS1, but it remains</del>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
<del>CSS2</del><ins>CSS 2.1</ins> 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 <del>new</del>'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.
</UL>
<div class="note"><P> <em><strong> <del>Aural properties give control over voice and audio output. The attribute selectors, 'attr()' function, and 'content' property give access to alternate content. 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.</del>Note.</strong> For more information
about designing accessible documents using CSS and HTML, <del>please consult</del><ins>see</ins> <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">
<p><a href="about.html">previous</a>
<a href="conform.html">next</a>
<a href="cover.html#minitoc">contents</a>
<a href="propidx.html">properties</a>
<a href="indexlist.html">index</a>
</div>
</BODY>
</HTML>