csswg-drafts/css2/intro.src at 396a3e911fac1d7220b743ac83e09f3b1ac783b6 · w3c/csswg-drafts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
<!-- $Id: intro.src,v 1.13 1997-11-27 03:24:49 ian Exp $ -->
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<TITLE>Introduction to CSS2</TITLE>
<LINK rel="next" href="convent.html">
<LINK rel="previous" href="about.html">
<LINK rel="STYLESHEET" href="style/default.css" type="text/css">
</HEAD>
<BODY>
<H1 align="center">Introduction to CSS2</H1>
<H2>A brief CSS2 tutorial</H2>

<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 <a
rel="biblioentry" href="./refs.html#ref-HTML40"
class="informref">[HTML40]</a> and some basic desktop publishing
terminology.

<P>We begin with the following (tiny) HTML document:

<PRE>
&lt;HTML&gt;
  &lt;TITLE&gt;Bach's home page&lt;/TITLE&gt;
  &lt;BODY&gt;
    &lt;H1&gt;Bach's home page&lt;/H1&gt;
    &lt;P&gt;Johann Sebastian Bach was a prolific composer.
  &lt;/BODY&gt;
&lt;/HTML&gt;
</PRE>

<P>To set the text color of the H1 elements to blue, you can write the
following CSS rule:

<PRE>
  H1 { color: blue }
</PRE>

<P>The <a rel="biblioentry" href="./refs.html#ref-HTML40" class="informref">[HTML40]</a>
specification defines how style sheet rules may be specified for HTML
documents: either within the HTML document, or via an external style
sheet. 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.

<P>In our example, we define our style sheet in the file
<samp>bach.css</samp>, and associate it with the source HTML document
via the LINK element:

<PRE class="example">
&lt;HTML&gt;
  &lt;TITLE&gt;Bach's home page&lt;/TITLE&gt;
  &lt;LINK rel="stylesheet" href="bach.css" type="text/css"&gt;
  &lt;BODY&gt;
    &lt;H1&gt;Bach's home page&lt;/H1&gt;
    &lt;P&gt;Johann Sebastian Bach was a prolific composer.
  &lt;/BODY&gt;
&lt;/HTML&gt;
</PRE>

<P>The LINK elements specifies:

<ul>
<li> the type of link: to a "stylesheet".
<li> the location of the stylesheet via a URL. Here, the file
<samp>bach.css</samp> in the same directory as the source HTML document.
<li>the type of style sheet being linked: "text/css".
</ul>

<P>A CSS rule consists of two main parts: <a
href="selector.html">selector</a> ('H1') and declaration ('color:
blue'). The declaration has two parts: property ('color') and value
('blue'). 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 combined) it will
determine the final presentation of the document.

<P>The <a href="selector.html">selector</a> is the link between the
HTML document and the style sheet; all <a rel="biblioentry"
href="./refs.html#ref-HTML40" class="informref">[HTML40]</a> element types are possible
selectors.

<P> The <span class="propinst-color">'color'</span> property is just
one of around 100 properties defined in this specification that
determine the presentation of an HTML document.  This specification
includes a <a href="./sample.html">sample style sheet</a> that
describes how HTML elements should be rendered by default.

<P>Let's extend our example to include a simple list of
three favorite Bach compositions:

<PRE class="example">
&lt;HTML&gt;
  &lt;TITLE&gt;Bach's home page&lt;/TITLE&gt;
  &lt;LINK rel="stylesheet" href="bach.css" type="text/css"&gt;
  &lt;BODY&gt;
    &lt;H1&gt;Bach's home page&lt;/H1&gt;
    &lt;P&gt;Johann Sebastian Bach was a prolific composer. Some
    Bach compositions that the editors prefer include:
    &lt;UL&gt;
    &lt;LI&gt; Mass in B-minor
    &lt;LI&gt; The Well-Tempered Clavier
    &lt;LI&gt; The Brandenburg Concertos
    &lt;/UL&gt;
  &lt;/BODY&gt;
&lt;/HTML&gt;
</PRE>


<P>With CSS2, authors may specify the exact formatting of lists: the
indentation of the list items, the separation of the list items, the
style of the bullet (for unordered lists), the type of numbering (for
ordered lists), etc. (see the section on
<a href="lists.html">lists</a> for more information). In this example, we
specify the bullet style for each list item to be a PNG image named
"bach.png":

<PRE class="example">
   UL { list-style-image: url(bach.png) }
</PRE>

<!-- Add image, printing, info, positioning, fonts -->

<H2>The CSS2 processing model</H2>

<P>The following 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 document
from parsing to rendering as follows:

<ol>
<li>Parse the source document and create a <a
href="convent.html#doctree">document tree</a> from the source
document.</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 node 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="flowobj.html">visual flow 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 rendering structure.
The rendering structure may differ significantly from the document
tree. First , the rendering structure need not be "tree-shaped" at all
-- the nature of the structure depends on the implementation.

<P>Second the rendering 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 <span
class="propinst-display">'display'</span> property, that element will
generate nothing in the rendering structure.  A list element, on the
other hand, may generate more information in the rendering structure:
the list element's content and list style information (e.g., a bullet
image).

<!-- Is the next statement still true? If so, it should probably
     be made specific and moved to flowobj2.src -->

<!--
<P>If an element A is an ancestor of an element D, all rendering
objects generated for A must be above the rendering objects
rendered for D in the tree of rendering objects. For box
and page box rendering objects, this implies that, to
find a containing box for a node, a user agent need only search
upward in the tree of rendering objects (not left, right, or down).
-->

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

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

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

<P>Step 6 lies outside the scope of this specification (and may not
exist in a given implementation).

<P>The majority of transfer issues in step 7 lie outside the scope of
this specification. However, CSS2 addresses these issues:

<ul>
<li>What can user agents do when certain system resources are
not available (e.g., <a href="fonts.html">fonts</a>)?
<li>How do style sheets interact
with system resources (e.g., <a href="ui.html">cursors and colors</a>)?
<li>How do style sheet properties assist certain devices
(e.g., <a href="page.html">page orientation for a printer</a>)?
</ul>

<h3>CSS2 addressing model</h3>

<P>CSS2 <a href="selector.html">selectors</a> and properties
allow authors to refer to the following "entities" from within
a style sheet:

<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="media.html#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>Design principles behind CSS2</H2>

<P><EM>This section is under construction</EM>

<UL>
<LI>backward compatibility
<LI>co
36AC
mplementary to structured documents
<LI>cascading
<LI>platform  &amp; device independence
<LI>accessibility
<LI>maintainability
<LI>network performance
</UL>

</BODY>
</HTML>