← Back to branch summary

~ubuntu-branches/ubuntu/raring/maas/raring-updates

« back to all changes in this revision

Viewing changes to src/maasserver/static/jslibs/yui/3.4.1/docs/stylesheet/stylesheet-theme-example.html

  • Committer: Package Import Robot
  • Author(s): Andres Rodriguez
  • Date: 2012-07-03 17:42:37 UTC
  • mfrom: (1.1.13)
  • Revision ID: package-import@ubuntu.com-20120703174237-p8l0keuuznfg721k
Tags: 0.1+bzr709+dfsg-0ubuntu1
* New Upstream release
* debian/control:
  - Depends on python-celery, python-tempita, libjs-yui3-{full,min},
    libjs-raphael
* debian/maas.install:
  - Install apiclient, celeryconfig.py, maas-import-pxe-files, preseeds_v2.
  - Update to install various files from chroot, rather tha manually copy
    them from the source.
* debian/maas.links: symlink celeryconfig.py
* debian/maas.maas-celery.upstart: Add job.
* debian/rules:
  - Install celery upstart job.
  - Do not install jslibs as packages are now used.
  - Drop copying of maas_local_settings_sample.py as source now ships
    a maas_local_settings.py
* debian/patches:
  - 04-maas-http-fix.patch: Drop. Merged upstream.
  - 01-fix-database-settings.patch: Refreshed.
  - 99_enums_js.patch: Added until creation of enum.js / build process
    is fixed.
* debian/maas.postinst: Update bzr version to correctly handle upgrades.

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/maasserver/static/jslibs/yui/3.4.1/docs/stylesheet/stylesheet-theme-example.html
1
 
<!DOCTYPE html>
2
 
<html lang="en" class="yui3-loading">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Adjusting a Page Theme on the Fly</title>
6
 
    <link rel="stylesheet" type="text/css" href="../assets/stylesheet/w3.css">
7
 
<style>
8
 
/* For supporting browsers, the overlay is rendered semi-transparent with
9
 
 * fancy rounded corners */
10
 
.yui3-overlay {
11
 
    background: rgba(128,128,128,0.3);
12
 
    -moz-border-radius: 10px;
13
 
    -webkit-border-radius: 10px;
14
 
    border-radius: 10px;
15
 
    padding: 7px;
16
 
    cursor: move;
17
 
}
18
 
.yui3-overlay-content {
19
 
    background: rgba(205,205,205,0.3);
20
 
    -moz-border-radius: 10px;
21
 
    -webkit-border-radius: 10px;
22
 
    border-radius: 10px;
23
 
    padding: 1px;
24
 
} 
25
 
.yui3-overlay form {
26
 
    background: #f2fbff url(../assets/stylesheet/gradient-promo.png) repeat-x scroll 0 0;
27
 
    border: 2px solid #fff;
28
 
    -moz-border-radius: 10px;
29
 
    -webkit-border-radius: 10px;
30
 
    border-radius: 10px;
31
 
    margin: 0;
32
 
    padding: 0;
33
 
    font-size: 13px;
34
 
}
35
 
.yui3-overlay fieldset {
36
 
    border: 1px solid #cde;
37
 
    -moz-border-radius: 10px;
38
 
    -webkit-border-radius: 10px;
39
 
    border-radius: 10px;
40
 
    margin: 0;
41
 
    padding: 20px;
42
 
}
43
 
.yui3-overlay h3 {
44
 
    border-bottom: 2px solid #fff;
45
 
    color: #479;
46
 
    background: transparent;
47
 
    margin: 0;
48
 
    font-size: 175%;
49
 
}
50
 
.yui3-overlay label {
51
 
    display: block;
52
 
    margin: 1.3em 0 0.5ex;
53
 
    font-weight: bold;
54
 
    color: #003;
55
 
}
56
 
.yui3-overlay p {
57
 
    margin: 2em 0 0;
58
 
}
59
 
/* override the move cursor for the Slider */
60
 
.yui3-overlay .yui3-slider:hover {
61
 
    cursor: default;
62
 
}
63
 
</style>
64
 
 
65
 
</head>
66
 
<body>
67
 
    <div class="navbar" align="center">
68
 
    &nbsp;<a href="http://www.w3.org/TR/html401/struct/objects.html">
69
 
    previous</a> &nbsp; <a href="http://www.w3.org/TR/html401/present/graphics.html">next</a> &nbsp; <a href="http://www.w3.org/TR/html401/cover.html#minitoc">contents</a> &nbsp; <a href="http://www.w3.org/TR/html401/index/elements.html">
70
 
    elements</a> &nbsp; <a href="http://www.w3.org/TR/html401/index/attributes.html">attributes</a> &nbsp; <a href="http://www.w3.org/TR/html401/index/list.html">index</a>
71
 
 
72
 
    <hr></div>
73
 
 
74
 
    <h1 align="center"><a name="h-14">14</a> <a name="stylesheets">Style
75
 
    Sheets</a></h1>
76
 
 
77
 
    <div class="subtoc">
78
 
    <p><strong>Contents</strong></p>
79
 
 
80
 
    <ol>
81
 
    <li><a class="tocxref" href="#h-14.1">Introduction to style sheets</a></li>
82
 
 
83
 
    <li><a class="tocxref" href="#h-14.2">Adding style to HTML</a>
84
 
 
85
 
    <ol>
86
 
    <li><a class="tocxref" href="#h-14.2.1">Setting the default style sheet
87
 
    language</a></li>
88
 
 
89
 
    <li><a class="tocxref" href="#h-14.2.2">Inline style information</a></li>
90
 
 
91
 
    <li><a class="tocxref" href="#h-14.2.3">Header style information: the <samp class="einst2">STYLE</samp> element</a></li>
92
 
 
93
 
    <li><a class="tocxref" href="#h-14.2.4">Media types</a></li>
94
 
    </ol>
95
 
    </li>
96
 
 
97
 
    <li><a class="tocxref" href="#h-14.3">External style sheets</a>
98
 
 
99
 
    <ol>
100
 
    <li><a class="tocxref" href="#h-14.3.1">Preferred and alternate style
101
 
    sheets</a></li>
102
 
 
103
 
    <li><a class="tocxref" href="#h-14.3.2">Specifying external style
104
 
    sheets</a></li>
105
 
    </ol>
106
 
    </li>
107
 
 
108
 
    <li><a class="tocxref" href="#h-14.4">Cascading style sheets</a>
109
 
 
110
 
    <ol>
111
 
    <li><a class="tocxref" href="#h-14.4.1">Media-dependent cascades</a></li>
112
 
 
113
 
    <li><a class="tocxref" href="#h-14.4.2">Inheritance and cascading</a></li>
114
 
    </ol>
115
 
    </li>
116
 
 
117
 
    <li><a class="tocxref" href="#h-14.5">Hiding style data from user
118
 
    agents</a></li>
119
 
 
120
 
    <li><a class="tocxref" href="#h-14.6">Linking to style sheets with HTTP
121
 
    headers</a></li>
122
 
    </ol>
123
 
    </div>
124
 
 
125
 
    <h2><a name="h-14.1">14.1</a> <span class="index-inst" title="style
126
 
    sheet::introduction to"><a name="idx-style_sheet-3">Introduction to style
127
 
    sheets</a></span></h2>
128
 
 
129
 
    <p>Style sheets represent a major breakthrough for Web page designers,
130
 
    expanding their ability to improve the appearance of their pages. In the
131
 
    scientific environments in which the Web was conceived, people are more
132
 
    concerned with the content of their documents than the presentation. As people
133
 
    from wider walks of life discovered the Web, the limitations of HTML became a
134
 
    source of continuing frustration and authors were forced to sidestep HTML's
135
 
    stylistic limitations. While the intentions have been good -- to improve the
136
 
    presentation of Web pages -- the techniques for doing so have had unfortunate
137
 
    side effects. These techniques work for some of the people, some of the time,
138
 
    but not for all of the people, all of the time. They include:</p>
139
 
 
140
 
    <ul>
141
 
    <li>Using proprietary HTML extensions</li>
142
 
 
143
 
    <li>Converting text into images</li>
144
 
 
145
 
    <li>Using images for white space control</li>
146
 
 
147
 
    <li>Use of tables for page layout</li>
148
 
 
149
 
    <li>Writing a program instead of using HTML</li>
150
 
    </ul>
151
 
 
152
 
    <p>These techniques considerably increase the complexity of Web pages, offer
153
 
    limited flexibility, suffer from interoperability problems, and create
154
 
    hardships for people with disabilities.</p>
155
 
 
156
 
    <p>Style sheets solve these problems at the same time they supersede the
157
 
    limited range of presentation mechanisms in HTML. Style sheets make it easy to
158
 
    specify the amount of white space between text lines, the amount lines are
159
 
    indented, the colors used for the text and the backgrounds, the font size and
160
 
    style, and a host of other details.</p>
161
 
 
162
 
    <div class="example">
163
 
    <p>For example, the following short CSS style sheet (stored in the file
164
 
    "special.css"), sets the text color of a paragraph to green and surrounds it
165
 
    with a solid red border:</p>
166
 
 
167
 
    <pre>P.special {
168
 
    color : green;
169
 
    border: solid red;
170
 
    }
171
 
    </pre>
172
 
 
173
 
    <p>Authors may link this style sheet to their source HTML document with the <a href="http://www.w3.org/TR/html401/struct/links.html#edef-LINK" class="noxref"><samp class="einst">
174
 
    LINK</samp></a> element:</p>
175
 
 
176
 
    <pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
177
 
       "http://www.w3.org/TR/html4/strict.dtd"&gt;
178
 
    &lt;HTML&gt;
179
 
      &lt;HEAD&gt;
180
 
        &lt;LINK href="special.css" rel="stylesheet" type="text/css"&gt;
181
 
      &lt;/HEAD&gt;
182
 
      &lt;BODY&gt;
183
 
        &lt;P class="special"&gt;This paragraph should have special green text.
184
 
      &lt;/BODY&gt;
185
 
    &lt;/HTML&gt;
186
 
    </pre>
187
 
    </div>
188
 
 
189
 
    <p>HTML 4 provides support for the following style sheet features:</p>
190
 
 
191
 
    <dl>
192
 
    <dt><b>Flexible placement of style information</b></dt>
193
 
 
194
 
    <dd>Placing style sheets in separate files makes them easy to reuse. Sometimes
195
 
    it's useful to include rendering instructions within the document to which they
196
 
    apply, either grouped at the start of the document, or in attributes of the
197
 
    elements throughout the body of the document. To make it easier to manage style
198
 
    on a site basis, this specification describes how to use HTTP headers to set
199
 
    the style sheets to be applied to a document.</dd>
200
 
 
201
 
    <dt><b>Independence from specific style sheet languages</b></dt>
202
 
 
203
 
    <dd>This specification doesn't tie HTML to any particular style sheet language.
204
 
    This allows for a range of such languages to be used, for instance simple ones
205
 
    for the majority of users and much more complex ones for the minority of users
206
 
    with highly specialized needs. The examples included below all use the CSS
207
 
    (Cascading Style Sheets) language <a rel="biblioentry" href="http://www.w3.org/TR/html401/references.html#ref-CSS1" class="informref">[CSS1]</a>, but other style
208
 
    sheet languages would be possible.</dd>
209
 
 
210
 
    <dt><b>Cascading</b></dt>
211
 
 
212
 
    <dd>This is the capability provided by some style sheet languages such as CSS
213
 
    to allow style information from several sources to be blended together. These
214
 
    could be, for instance, corporate style guidelines, styles common to a group of
215
 
    documents, and styles specific to a single document. By storing these
216
 
    separately, style sheets can be reused, simplifying authoring and making more
217
 
    effective use of network caching. The cascade defines an ordered sequence of
218
 
    style sheets where rules in later sheets have greater precedence than earlier
219
 
    ones. Not all style sheet languages support cascading.</dd>
220
 
 
221
 
    <dt><span class="index-inst" title="accessibility::and style sheets"><a name="idx-accessibility"><b>Media dependencies</b></a></span></dt>
222
 
 
223
 
    <dd>HTML allows authors to specify documents in a media-independent way. This
224
 
    allows users to access Web pages using a wide variety of devices and media,
225
 
    e.g., graphical displays for computers running Windows, Macintosh OS, and X11,
226
 
    devices for television sets, specially adapted phones and PDA-based portable
227
 
    devices, speech-based browsers, and braille-based tactile devices.
228
 
 
229
 
    <p>Style sheets, by contrast, apply to specific media or media groups. A style
230
 
    sheet intended for screen use may be applicable when printing, but is of little
231
 
    use for speech-based browsers. This specification allows you to define the
232
 
    broad categories of media a given style sheet is applicable to. This allows
233
 
    user agents to avoid retrieving inappropriate style sheets. Style sheet
234
 
    languages may include features for describing media dependencies within the
235
 
    same style sheet.</p>
236
 
    </dd>
237
 
 
238
 
    <dt><b>Alternate styles</b></dt>
239
 
 
240
 
    <dd>Authors may wish to offer readers several ways to view a document. For
241
 
    instance, a style sheet for rendering compact documents with small fonts, or
242
 
    one that specifies larger fonts for increased legibility. This specification
243
 
    allows authors to specify a preferred style sheet as well as alternates that
244
 
    target specific users or media. User agents should give users the opportunity
245
 
    to select from among alternate style sheets or to switch off style sheets
246
 
    altogether.</dd>
247
 
 
248
 
    <dt><b>Performance concerns</b></dt>
249
 
 
250
 
    <dd>Some people have voiced concerns over performance issues for style sheets.
251
 
    For instance, retrieving an external style sheet may delay the full
252
 
    presentation for the user. A similar situation arises if the document head
253
 
    includes a lengthy set of style rules.
254
 
 
255
 
    <p>The current proposal addresses these issues by allowing authors to include
256
 
    rendering instructions within each HTML element. The rendering information is
257
 
    then always available by the time the user agent wants to render each
258
 
    element.</p>
259
 
 
260
 
    <p>In many cases, authors will take advantage of a common style sheet for a
261
 
    group of documents. In this case, distributing style rules throughout the
262
 
    document will actually lead to worse performance than using a linked style
263
 
    sheet, since for most documents, the style sheet will already be present in the
264
 
    local cache. The public availability of good style sheets will encourage this
265
 
    effect.</p>
266
 
    </dd>
267
 
    </dl>
268
 
 
269
 
    <h2><a name="h-14.2">14.2</a> Adding style to HTML</h2>
270
 
 
271
 
    <div class="note">
272
 
    <p><em><strong>Note.</strong> The sample default style sheet for HTML 4 that is
273
 
    included in <a rel="biblioentry" href="http://www.w3.org/TR/html401/references.html#ref-CSS2" class="informref">[CSS2]</a> expresses generally accepted default style information
274
 
    for each element. Authors and implementors alike might find this a useful
275
 
    resource.</em></p>
276
 
    </div>
277
 
 
278
 
    <p>HTML documents may contain style sheet rules directly in them or they may
279
 
    import style sheets.</p>
280
 
 
281
 
    <p>Any style sheet language may be used with HTML. A simple style sheet
282
 
    language may suffice for the needs of most users, but other languages may be
283
 
    more suited to highly specialized needs. This specification uses the style
284
 
    language "Cascading Style Sheets" (<a rel="biblioentry" href="http://www.w3.org/TR/html401/references.html#ref-CSS1" class="informref">[CSS1]</a>), abbreviated CSS,
285
 
    for examples.</p>
286
 
 
287
 
    <p>The <a href="http://www.w3.org/TR/html401/types.html#type-style">syntax of style data</a> depends on
288
 
    the style sheet language.</p>
289
 
 
290
 
    <h3><a name="h-14.2.1">14.2.1</a> <span class="index-inst" title="default::style sheet language|style sheet
291
 
    language::default|HTTP::Content-Style-Type header|Content-Style-Type header"><a name="default-style">Setting the default style sheet language</a></span></h3>
292
 
 
293
 
    <p>Authors must specify the style sheet language of style information
294
 
    associated with an HTML document.</p>
295
 
 
296
 
    <p>Authors should use the <a href="http://www.w3.org/TR/html401/struct/global.html#edef-META" class="noxref"><samp class="einst">META</samp></a> element to set the default style
297
 
    sheet language for a document. For example, to set the default to CSS, authors
298
 
    should put the following declaration in the <a href="http://www.w3.org/TR/html401/struct/global.html#edef-HEAD" class="noxref"><samp class="einst">
299
 
    HEAD</samp></a> of their documents:</p>
300
 
 
301
 
    <pre>&lt;META http-equiv="Content-Style-Type" content="text/css"&gt;
302
 
    </pre>
303
 
 
304
 
    <p>The default style sheet language may also be set with HTTP headers. The
305
 
    above <a href="http://www.w3.org/TR/html401/struct/global.html#edef-META" class="noxref"><samp class="einst">META</samp></a> declaration is equivalent to the HTTP header:</p>
306
 
 
307
 
    <pre>Content-Style-Type: text/css
308
 
    </pre>
309
 
 
310
 
    <p>User agents should determine the default style sheet language for a document
311
 
    according to the following steps (highest to lowest priority):</p>
312
 
 
313
 
    <ol>
314
 
    <li>If any <a href="http://www.w3.org/TR/html401/struct/global.html#edef-META" class="noxref"><samp class="einst">META</samp></a> declarations specify the "Content-Style-Type",
315
 
    the last one in the character stream determines the default style sheet
316
 
    language.</li>
317
 
 
318
 
    <li>Otherwise, if any HTTP headers specify the "Content-Style-Type", the last
319
 
    one in the character stream determines the default style sheet language.</li>
320
 
 
321
 
    <li>Otherwise, the default style sheet language is "text/css".</li>
322
 
    </ol>
323
 
 
324
 
    <p>Documents that include elements that set the <a href="http://www.w3.org/TR/html401/present/styles.html#adef-style" class="noxref"><samp class="ainst">style</samp></a>
325
 
    attribute but which don't define a default style sheet language are incorrect.
326
 
    <span class="index-inst" title="authoring tool::and default style sheet
327
 
    language"><a name="idx-authoring_tool">Authoring tools</a></span> should
328
 
    generate default style sheet language information (typically a <a href="http://www.w3.org/TR/html401/struct/global.html#edef-META" class="noxref"><samp class="einst">
329
 
    META</samp></a> declaration) so that user agents do not have to rely on a
330
 
    default of "text/css".</p>
331
 
 
332
 
    <h3><a name="h-14.2.2">14.2.2</a> <a name="style-element">Inline style
333
 
    information</a></h3>
334
 
 
335
 
    <div class="adef-list">
336
 
    <p><em>Attribute definitions</em></p>
337
 
 
338
 
    <dl>
339
 
    <dt><a name="adef-style"><samp class="adef">style</samp></a> = <a href="http://www.w3.org/TR/html401/types.html#type-style"><em>style</em></a> <a href="http://www.w3.org/TR/html401/types.html#case-neutral">[CN]</a></dt>
340
 
 
341
 
    <dd>This attribute specifies style information for the current element.</dd>
342
 
    </dl>
343
 
    </div>
344
 
 
345
 
    <p><span class="index-inst" title="style sheet::inline rules"><a name="idx-style_sheet-4">The</a></span> <a href="http://www.w3.org/TR/html401/types.html#type-style">
346
 
    syntax</a> of the value of the <a href="http://www.w3.org/TR/html401/present/styles.html#adef-style" class="noxref">
347
 
    <samp class="ainst">style</samp></a> attribute is determined by the <a href="#default-style">default style sheet language</a>. For example, for [[CSS2]]
348
 
    inline style, use the declaration block syntax described in section 4.1.8
349
 
    (without curly brace delimiters).</p>
350
 
 
351
 
    <div class="example">
352
 
    <p>This CSS example sets color and font size information for the text in a
353
 
    specific paragraph.</p>
354
 
 
355
 
    <pre>&lt;P style="font-size: 12pt; color: fuchsia"&gt;Aren't style sheets wonderful?
356
 
    </pre>
357
 
 
358
 
    <p>In CSS, property declarations have the form "name : value" and are separated
359
 
    by a semi-colon.</p>
360
 
    </div>
361
 
 
362
 
    <p>To specify style information for more than one element, authors should use
363
 
    the <samp class="edef">STYLE</samp> element. For optimal flexibility, authors
364
 
    should define styles in external style sheets.</p>
365
 
 
366
 
    <h3><a name="h-14.2.3">14.2.3</a> <a name="style-group">Header style
367
 
    information</a>: the <a name="edef-STYLE"><samp class="edef">STYLE</samp></a>
368
 
    element</h3>
369
 
 
370
 
    <div class="dtd-fragment">
371
 
    <pre class="dtd-fragment">&lt;!ELEMENT <a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref"><samp class="einst">STYLE</samp></a> - - <a href="http://www.w3.org/TR/html401/sgml/dtd.html#StyleSheet">%StyleSheet</a>        -- style info --&gt;
372
 
    &lt;!ATTLIST STYLE
373
 
      <a href="http://www.w3.org/TR/html401/sgml/dtd.html#i18n">%i18n;</a>                               -- <a href="http://www.w3.org/TR/html401/struct/dirlang.html#adef-lang">lang</a>, <a href="http://www.w3.org/TR/html401/struct/dirlang.html#adef-dir">dir</a>, for use with title --
374
 
      <a href="http://www.w3.org/TR/html401/present/styles.html#adef-type-STYLE" class="noxref"><samp class="ainst-STYLE">type</samp></a>        <a href="http://www.w3.org/TR/html401/sgml/dtd.html#ContentType">%ContentType;</a>  #REQUIRED -- content type of style language --
375
 
      <a href="http://www.w3.org/TR/html401/present/styles.html#adef-media" class="noxref"><samp class="ainst-STYLE">media</samp></a>       <a href="http://www.w3.org/TR/html401/sgml/dtd.html#MediaDesc">%MediaDesc;</a>    #IMPLIED  -- designed for use with these media --
376
 
      <a href="http://www.w3.org/TR/html401/struct/global.html#adef-title" class="noxref"><samp class="ainst-STYLE">title</samp></a>       <a href="http://www.w3.org/TR/html401/sgml/dtd.html#Text">%Text;</a>         #IMPLIED  -- advisory title --
377
 
      &gt;
378
 
    </pre>
379
 
    </div>
380
 
 
381
 
    <p><em>Start tag: <strong>required</strong>, End tag: <strong>
382
 
    required</strong></em></p>
383
 
 
384
 
    <div class="adef-list">
385
 
    <p><em>Attribute definitions</em></p>
386
 
 
387
 
    <dl>
388
 
    <dt><a name="adef-type-STYLE"><samp class="adef">type</samp></a> = <a href="http://www.w3.org/TR/html401/types.html#type-content-type"><em>content-type</em></a> <a href="http://www.w3.org/TR/html401/types.html#case-insensitive">[CI]</a></dt>
389
 
 
390
 
    <dd>This attribute specifies the style sheet language of the element's contents
391
 
    and overrides the default style sheet language. The style sheet language is
392
 
    specified as a content type (e.g., "text/css"). Authors must supply a value for
393
 
    this attribute; there is no default value for this attribute.</dd>
394
 
 
395
 
    <dt><a name="adef-media"><samp class="adef">media</samp></a> = <a href="http://www.w3.org/TR/html401/types.html#type-media-descriptors"><em>media-descriptors</em></a> <a href="http://www.w3.org/TR/html401/types.html#case-insensitive">[CI]</a></dt>
396
 
 
397
 
    <dd>This attribute specifies the intended destination medium for style
398
 
    information. It may be a single media descriptor or a comma-separated list. The
399
 
    default value for this attribute is "screen".</dd>
400
 
    </dl>
401
 
    </div>
402
 
 
403
 
    <div class="aref-list">
404
 
    <p><em>Attributes defined elsewhere</em></p>
405
 
 
406
 
    <ul>
407
 
    <li><a href="http://www.w3.org/TR/html401/struct/dirlang.html#adef-lang" class="noxref"><samp class="ainst">lang</samp></a> (<a href="http://www.w3.org/TR/html401/struct/dirlang.html#language-info">language information</a>), <a href="http://www.w3.org/TR/html401/struct/dirlang.html#adef-dir" class="noxref"><samp class="ainst">
408
 
    dir</samp></a> (<a href="http://www.w3.org/TR/html401/struct/dirlang.html#bidirection">text
409
 
    direction</a>)</li>
410
 
 
411
 
    <li><a href="http://www.w3.org/TR/html401/struct/global.html#adef-title" class="noxref"><samp class="ainst">title</samp></a> (<a href="http://www.w3.org/TR/html401/struct/global.html#title">element
412
 
    title</a>)</li>
413
 
    </ul>
414
 
    </div>
415
 
 
416
 
    <p>The <a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref"><samp class="einst">
417
 
    STYLE</samp></a> element allows authors to put style sheet rules in the <span class="index-inst" title="style sheet::rules in HEAD"><a name="idx-style_sheet-5">head</a></span> of the document. HTML permits any number of
418
 
    <a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref"><samp class="einst">
419
 
    STYLE</samp></a> elements in the <a href="http://www.w3.org/TR/html401/struct/global.html#edef-HEAD" class="noxref"><samp class="einst">HEAD</samp></a> section of a document.</p>
420
 
 
421
 
    <p>User agents that don't support style sheets, or don't support the specific
422
 
    style sheet language used by a <a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref">
423
 
    <samp class="einst">STYLE</samp></a> element, must hide the contents of the <a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref"><samp class="einst">
424
 
    STYLE</samp></a> element. <span class="index-inst" title="error::rendering
425
 
    style rules in STYLE"><a name="idx-error">It is an error</a></span> to render
426
 
    the content as part of the document's text. Some style sheet languages support
427
 
    syntax for <a href="#hiding">hiding the content</a> from non-conforming user
428
 
    agents.</p>
429
 
 
430
 
    <p>The <a href="http://www.w3.org/TR/html401/types.html#type-style">syntax of style data</a> depends on
431
 
    the style sheet language.</p>
432
 
 
433
 
    <p>Some style sheet implementations may allow a wider variety of rules in the
434
 
    <a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref"><samp class="einst">
435
 
    STYLE</samp></a> element than in the <a href="http://www.w3.org/TR/html401/present/styles.html#adef-style" class="noxref"><samp class="ainst">style</samp></a> attribute. For example, with CSS,
436
 
    rules may be declared within a <a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref">
437
 
    <samp class="einst">STYLE</samp></a> element for:</p>
438
 
 
439
 
    <ul>
440
 
    <li>All instances of a specific HTML element (e.g., all <a href="http://www.w3.org/TR/html401/struct/text.html#edef-P" class="noxref"><samp class="einst">P</samp></a>
441
 
    elements, all <a href="http://www.w3.org/TR/html401/struct/global.html#edef-H1" class="noxref"><samp class="einst">H1</samp></a> elements, etc.)</li>
442
 
 
443
 
    <li>All instances of an HTML element belonging to a specific class (i.e., whose
444
 
    <a href="http://www.w3.org/TR/html401/struct/global.html#adef-class" class="noxref"><samp class="ainst">
445
 
    class</samp></a> attribute is set to some value).</li>
446
 
 
447
 
    <li>Single instances of an HTML element (i.e., whose <a href="http://www.w3.org/TR/html401/struct/global.html#adef-id" class="noxref"><samp class="ainst">
448
 
    id</samp></a> attribute is set to some value).</li>
449
 
    </ul>
450
 
 
451
 
    <p>Rules for style rule precedences and inheritance depend on the style sheet
452
 
    language.</p>
453
 
 
454
 
    <div class="example">
455
 
    <p>The following CSS <a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref"><samp class="einst">STYLE</samp></a> declaration puts a border around every <a href="http://www.w3.org/TR/html401/struct/global.html#edef-H1" class="noxref"><samp class="einst">
456
 
    H1</samp></a> element in the document and centers it on the page.</p>
457
 
 
458
 
    <pre>&lt;HEAD&gt;
459
 
     &lt;STYLE type="text/css"&gt;
460
 
       H1 {border-width: 1; border: solid; text-align: center}
461
 
     &lt;/STYLE&gt;
462
 
    &lt;/HEAD&gt;
463
 
    </pre>
464
 
 
465
 
    <p>To specify that this style information should only apply to <a href="http://www.w3.org/TR/html401/struct/global.html#edef-H1" class="noxref"><samp class="einst">
466
 
    H1</samp></a> elements of a specific class, we modify it as follows:</p>
467
 
 
468
 
    <pre>&lt;HEAD&gt;
469
 
     &lt;STYLE type="text/css"&gt;
470
 
       H1.myclass {border-width: 1; border: solid; text-align: center}
471
 
     &lt;/STYLE&gt;
472
 
    &lt;/HEAD&gt;
473
 
    &lt;BODY&gt;
474
 
     &lt;H1 class="myclass"&gt; This H1 is affected by our style &lt;/H1&gt;
475
 
     &lt;H1&gt; This one is not affected by our style &lt;/H1&gt;
476
 
    &lt;/BODY&gt;
477
 
    </pre>
478
 
 
479
 
    <p>Finally, to limit the scope of the style information to a single instance of
480
 
    <a href="http://www.w3.org/TR/html401/struct/global.html#edef-H1" class="noxref"><samp class="einst">
481
 
    H1</samp></a>, set the <a href="http://www.w3.org/TR/html401/struct/global.html#adef-id" class="noxref">
482
 
    <samp class="ainst">id</samp></a> attribute:</p>
483
 
 
484
 
    <pre>&lt;HEAD&gt;
485
 
     &lt;STYLE type="text/css"&gt;
486
 
       #myid {border-width: 1; border: solid; text-align: center}
487
 
     &lt;/STYLE&gt;
488
 
    &lt;/HEAD&gt;
489
 
    &lt;BODY&gt;
490
 
     &lt;H1 class="myclass"&gt; This H1 is not affected &lt;/H1&gt;
491
 
     &lt;H1 id="myid"&gt; This H1 is affected by style &lt;/H1&gt;
492
 
     &lt;H1&gt; This H1 is not affected &lt;/H1&gt;
493
 
    &lt;/BODY&gt;
494
 
    </pre>
495
 
    </div>
496
 
 
497
 
    <p><span class="index-inst" title="style sheet::used with DIV and SPAN"><a name="idx-style_sheet-6">Although style information</a></span> may be set for
498
 
    almost every HTML element, two elements, <a href="http://www.w3.org/TR/html401/struct/global.html#edef-DIV" class="noxref"><samp class="einst">
499
 
    DIV</samp></a> and <a href="http://www.w3.org/TR/html401/struct/global.html#edef-SPAN" class="noxref">
500
 
    <samp class="einst">SPAN</samp></a>, are particularly useful in that they do
501
 
    not impose any presentation semantics (besides <a href="http://www.w3.org/TR/html401/struct/global.html#block-inline">block-level vs. inline</a>). When combined
502
 
    with style sheets, these elements allow users to extend HTML indefinitely,
503
 
    particularly when used with the <a href="http://www.w3.org/TR/html401/struct/global.html#adef-class" class="noxref"><samp class="ainst">class</samp></a> and <a href="http://www.w3.org/TR/html401/struct/global.html#adef-id" class="noxref"><samp class="ainst">
504
 
    id</samp></a> attributes.</p>
505
 
 
506
 
    <div class="example">
507
 
    <p>In the following example, we use the <a href="http://www.w3.org/TR/html401/struct/global.html#edef-SPAN" class="noxref"><samp class="einst">
508
 
    SPAN</samp></a> element to set the font style of the first few words of a
509
 
    paragraph to small caps.</p>
510
 
 
511
 
    <pre>&lt;HEAD&gt;
512
 
     &lt;STYLE type="text/css"&gt;
513
 
      SPAN.sc-ex { font-variant: small-caps }
514
 
     &lt;/STYLE&gt;
515
 
    &lt;/HEAD&gt;
516
 
    &lt;BODY&gt;
517
 
      &lt;P&gt;&lt;SPAN class="sc-ex"&gt;The first&lt;/SPAN&gt; few words of
518
 
      this paragraph are in small-caps.
519
 
    &lt;/BODY&gt;
520
 
    </pre>
521
 
    </div>
522
 
 
523
 
    <div class="example">
524
 
    <p>In the following example, we use <a href="http://www.w3.org/TR/html401/struct/global.html#edef-DIV" class="noxref"><samp class="einst">DIV</samp></a> and the <a href="http://www.w3.org/TR/html401/struct/global.html#adef-class" class="noxref"><samp class="ainst">
525
 
    class</samp></a> attribute to set the text justification for a series of
526
 
    paragraphs that make up the abstract section of a scientific article. This
527
 
    style information could be reused for other abstract sections by setting the <a href="http://www.w3.org/TR/html401/struct/global.html#adef-class" class="noxref"><samp class="ainst">
528
 
    class</samp></a> attribute elsewhere in the document.</p>
529
 
 
530
 
    <pre>&lt;HEAD&gt;
531
 
     &lt;STYLE type="text/css"&gt;
532
 
       DIV.Abstract { text-align: justify }
533
 
     &lt;/STYLE&gt;
534
 
    &lt;/HEAD&gt;
535
 
    &lt;BODY&gt;
536
 
     &lt;DIV class="Abstract"&gt;
537
 
       &lt;P&gt;The Chieftain product range is our market winner for
538
 
         the coming year. This report sets out how to position
539
 
         Chieftain against competing products.
540
 
 
541
 
       &lt;P&gt;Chieftain replaces the Commander range, which will
542
 
         remain on the price list until further notice.
543
 
     &lt;/DIV&gt;
544
 
    &lt;/BODY&gt;
545
 
    </pre>
546
 
    </div>
547
 
 
548
 
    <h3><a name="h-14.2.4">14.2.4</a> <span class="index-inst" title="media::used
549
 
    with style sheets|style sheet::target media for"><a name="media-types">Media
550
 
    types</a></span></h3>
551
 
 
552
 
    <p>HTML allows authors to design documents that take advantage of the
553
 
    characteristics of the media where the document is to be rendered (e.g.,
554
 
    graphical displays, television screens, handheld devices, speech-based
555
 
    browsers, braille-based tactile devices, etc.). By specifying the <a href="http://www.w3.org/TR/html401/present/styles.html#adef-media" class="noxref"><samp class="ainst">media</samp></a>
556
 
    attribute, authors allow user agents to load and apply style sheets
557
 
    selectively. Please consult the list of recognized <a href="http://www.w3.org/TR/html401/types.html#type-media-descriptors">media descriptors</a>.</p>
558
 
 
559
 
    <div class="example">
560
 
    <p>The following sample declarations apply to <a href="http://www.w3.org/TR/html401/struct/global.html#edef-H1" class="noxref"><samp class="einst">
561
 
    H1</samp></a> elements. When projected in a business meeting, all instances
562
 
    will be blue. When printed, all instances will be centered.</p>
563
 
 
564
 
    <pre>&lt;HEAD&gt;
565
 
     &lt;STYLE type="text/css" media="projection"&gt;
566
 
        H1 { color: blue}
567
 
     &lt;/STYLE&gt;
568
 
 
569
 
     &lt;STYLE type="text/css" media="print"&gt;
570
 
       H1 { text-align: center }
571
 
     &lt;/STYLE&gt;
572
 
    </pre>
573
 
 
574
 
    <p>This example adds sound effects to anchors for use in speech output:</p>
575
 
 
576
 
    <pre> &lt;STYLE type="text/css" media="aural"&gt;
577
 
       A { cue-before: uri(bell.aiff); cue-after: uri(dong.wav)}
578
 
     &lt;/STYLE&gt;
579
 
    &lt;/HEAD&gt;
580
 
    </pre>
581
 
    </div>
582
 
 
583
 
    <p>Media control is particularly interesting when applied to external style
584
 
    sheets since user agents can save time by retrieving from the network only
585
 
    those style sheets that apply to the current device. For instance, speech-based
586
 
    browsers can avoid downloading style sheets designed for visual rendering. See
587
 
    the section on <a href="#media-cascades">media-dependent cascades</a> for more
588
 
    information.</p>
589
 
 
590
 
    <h2><a name="h-14.3">14.3</a> <span class="index-inst" title="style
591
 
    sheet::external"><a name="style-external">External style sheets</a></span></h2>
592
 
 
593
 
    <p>Authors may separate style sheets from HTML documents. This offers several
594
 
    benefits:</p>
595
 
 
596
 
    <ul>
597
 
    <li>Authors and Web site managers may share style sheets across a number of
598
 
    documents (and sites).</li>
599
 
 
600
 
    <li>Authors may change the style sheet without requiring modifications to the
601
 
    document.</li>
602
 
 
603
 
    <li>User agents may load style sheets selectively (based on media
604
 
    descriptions).</li>
605
 
    </ul>
606
 
 
607
 
    <h3><a name="h-14.3.1">14.3.1</a> Preferred and alternate style sheets</h3>
608
 
 
609
 
    <p>HTML allows authors to associate any number of external style sheets with a
610
 
    document. The style sheet language defines how multiple external style sheets
611
 
    interact (for example, the CSS "cascade" rules).</p>
612
 
 
613
 
    <p><span class="index-def" title="style sheet::alternate|alternate style
614
 
    sheets"><a name="didx-style_sheet">Authors may specify a number of mutually
615
 
    exclusive style sheets called <dfn>alternate</dfn> style sheets.</a></span>
616
 
    Users may select their favorite among these depending on their preferences. For
617
 
    instance, an author may specify one style sheet designed for small screens and
618
 
    another for users with weak vision (e.g., large fonts). User agents should
619
 
    allow users to select from alternate style sheets.</p>
620
 
 
621
 
    <p><span class="index-def" title="style sheet::preferred|preferred style
622
 
    sheets"><a name="didx-style_sheet-1">The author may specify that one of the
623
 
    alternates is a <dfn>preferred</dfn> style sheet.</a></span> User agents should
624
 
    apply the author's preferred style sheet unless the user has selected a
625
 
    different alternate.</p>
626
 
 
627
 
    <p>Authors may group several alternate style sheets (including the author's
628
 
    preferred style sheets) under a single <dfn>style name</dfn>. When a user
629
 
    selects a named style, the user agent must apply all style sheets with that
630
 
    name. User agents must not apply alternate style sheets with a different style
631
 
    name. The section on <a href="#specifying-external">specifying external style
632
 
    sheets</a> explains how to name a group of style sheets.</p>
633
 
 
634
 
    <p><span class="index-def" title="style sheet::persistent|persistent style
635
 
    sheets"><a name="didx-style_sheet-2">Authors may also specify <dfn>
636
 
    persistent</dfn> style sheets that user agents must apply in addition to any
637
 
    alternate style sheet.</a></span></p>
638
 
 
639
 
    <p>User agents must respect <a href="http://www.w3.org/TR/html401/types.html#type-media-descriptors">
640
 
    media descriptors</a> when applying any style sheet.</p>
641
 
 
642
 
    <p>User agents should also allow users to disable the author's style sheets
643
 
    entirely, in which case the user agent must not apply any persistent or
644
 
    alternate style sheets.</p>
645
 
 
646
 
    <h3><a name="h-14.3.2">14.3.2</a> <span class="index-inst" title="style
647
 
    sheet::specification of external|link::and external style sheets"><a name="specifying-external">Specifying external style sheets</a></span></h3>
648
 
 
649
 
    <p>Authors specify external style sheets with the following attributes of the
650
 
    <a href="http://www.w3.org/TR/html401/struct/links.html#edef-LINK" class="noxref"><samp class="einst">
651
 
    LINK</samp></a> element:</p>
652
 
 
653
 
    <ul>
654
 
    <li>Set the value of <a href="http://www.w3.org/TR/html401/struct/links.html#adef-href" class="noxref">
655
 
    <samp class="ainst">href</samp></a> to the location of the style sheet file.
656
 
    The value of <a href="http://www.w3.org/TR/html401/struct/links.html#adef-href" class="noxref"><samp class="ainst">href</samp></a> is a <a href="http://www.w3.org/TR/html401/types.html#type-uri">
657
 
    URI</a>.</li>
658
 
 
659
 
    <li>Set the value of the <a href="http://www.w3.org/TR/html401/struct/links.html#adef-type-A" class="noxref"><samp class="ainst-A">type</samp></a> attribute to indicate the
660
 
    language of the linked (style sheet) resource. This allows the user agent to
661
 
    avoid downloading a style sheet for an unsupported style sheet language.</li>
662
 
 
663
 
    <li>Specify that the style sheet is persistent, preferred, or alternate:
664
 
 
665
 
    <ul>
666
 
    <li>To make a style sheet persistent, set the <a href="http://www.w3.org/TR/html401/struct/links.html#adef-rel" class="noxref"><samp class="ainst">
667
 
    rel</samp></a> attribute to "stylesheet" and don't set the <a href="http://www.w3.org/TR/html401/struct/global.html#adef-title" class="noxref"><samp class="ainst">
668
 
    title</samp></a> attribute.</li>
669
 
 
670
 
    <li>To make a style sheet preferred, set the <a href="http://www.w3.org/TR/html401/struct/links.html#adef-rel" class="noxref"><samp class="ainst">
671
 
    rel</samp></a> attribute to "stylesheet" and name the style sheet with the <a href="http://www.w3.org/TR/html401/struct/global.html#adef-title" class="noxref"><samp class="ainst">
672
 
    title</samp></a> attribute.</li>
673
 
 
674
 
    <li>To specify an alternate style sheet, set the <a href="http://www.w3.org/TR/html401/struct/links.html#adef-rel" class="noxref"><samp class="ainst">
675
 
    rel</samp></a> attribute to "alternate stylesheet" and name the style sheet
676
 
    with the <a href="http://www.w3.org/TR/html401/struct/global.html#adef-title" class="noxref"><samp class="ainst">title</samp></a> attribute.</li>
677
 
    </ul>
678
 
    </li>
679
 
    </ul>
680
 
 
681
 
    <p>User agents should provide a means for users to view and pick from the list
682
 
    of alternate styles. The value of the <a href="http://www.w3.org/TR/html401/struct/global.html#adef-title" class="noxref"><samp class="ainst">
683
 
    title</samp></a> attribute is recommended as the name of each choice.</p>
684
 
 
685
 
    <div class="example">
686
 
    <p>In this example, we first specify a persistent style sheet located in the
687
 
    file <tt>mystyle.css</tt>:</p>
688
 
 
689
 
    <pre>&lt;LINK href="mystyle.css" rel="stylesheet" type="text/css"&gt;
690
 
    </pre>
691
 
 
692
 
    <p>Setting the <a href="http://www.w3.org/TR/html401/struct/global.html#adef-title" class="noxref"><samp class="ainst">title</samp></a> attribute makes this the author's preferred
693
 
    style sheet:</p>
694
 
 
695
 
    <pre> &lt;LINK href="mystyle.css" title="compact" rel="stylesheet" type="text/css"&gt;
696
 
    </pre>
697
 
 
698
 
    <p>Adding the keyword "alternate" to the <a href="http://www.w3.org/TR/html401/struct/links.html#adef-rel" class="noxref"><samp class="ainst">
699
 
    rel</samp></a> attribute makes it an alternate style sheet:</p>
700
 
 
701
 
    <pre>&lt;LINK href="mystyle.css" title="Medium" rel="alternate stylesheet" type="text/css"&gt;
702
 
    </pre>
703
 
    </div>
704
 
 
705
 
    <p>For more information on external style sheets, please consult the section on
706
 
    <a href="http://www.w3.org/TR/html401/struct/links.html#linksandss">links and external style
707
 
    sheets.</a></p>
708
 
 
709
 
    <p><span class="index-inst" title="HTTP::Default-Style header|style
710
 
    sheet::specification of preferred">Authors may also use the <a name="idx-HTTP-1" href="http://www.w3.org/TR/html401/struct/global.html#edef-META" class="noxref"><samp class="einst">META</samp></a> element to set the document's preferred style
711
 
    sheet.</span> For example, to set the preferred style sheet to "compact" (see
712
 
    the preceding example), authors may include the following line in the <a href="http://www.w3.org/TR/html401/struct/global.html#edef-HEAD" class="noxref"><samp class="einst">
713
 
    HEAD</samp></a>:</p>
714
 
 
715
 
    <div class="example">
716
 
    <pre>&lt;META http-equiv="Default-Style" content="compact"&gt;
717
 
    </pre>
718
 
    </div>
719
 
 
720
 
    <p>The preferred style sheet may also be specified with HTTP headers. The above
721
 
    <a href="http://www.w3.org/TR/html401/struct/global.html#edef-META" class="noxref"><samp class="einst">
722
 
    META</samp></a> declaration is equivalent to the HTTP header:</p>
723
 
 
724
 
    <div class="example">
725
 
    <pre>Default-Style: "compact"
726
 
    </pre>
727
 
    </div>
728
 
 
729
 
    <p>If two or more <a href="http://www.w3.org/TR/html401/struct/global.html#edef-META" class="noxref">
730
 
    <samp class="einst">META</samp></a> declarations or HTTP headers specify the
731
 
    preferred style sheet, the last one takes precedence. HTTP headers are
732
 
    considered to occur earlier than the document <a href="http://www.w3.org/TR/html401/struct/global.html#edef-HEAD" class="noxref"><samp class="einst">
733
 
    HEAD</samp></a> for this purpose.</p>
734
 
 
735
 
    <p>If two or more <a href="http://www.w3.org/TR/html401/struct/links.html#edef-LINK" class="noxref"><samp class="einst">LINK</samp></a> elements specify a preferred style sheet, the
736
 
    first one takes precedence.</p>
737
 
 
738
 
    <p>Preferred style sheets specified with <a href="http://www.w3.org/TR/html401/struct/global.html#edef-META" class="noxref"><samp class="einst">
739
 
    META</samp></a> or HTTP headers have precedence over those specified with the
740
 
    <a href="http://www.w3.org/TR/html401/struct/links.html#edef-LINK" class="noxref"><samp class="einst">
741
 
    LINK</samp></a> element.</p>
742
 
 
743
 
    <h2><a name="h-14.4">14.4</a> <span class="index-inst" title="style
744
 
    sheet::cascading|cascading style sheets"><a name="idx-style_sheet-11">Cascading
745
 
    style sheets</a></span></h2>
746
 
 
747
 
    <p><dfn>Cascading</dfn> style sheet languages such as CSS allow style
748
 
    information from several sources to be blended together. However, not all style
749
 
    sheet languages support cascading. To define a cascade, authors specify a
750
 
    sequence of <a href="http://www.w3.org/TR/html401/struct/links.html#edef-LINK" class="noxref"><samp class="einst">LINK</samp></a> and/or <a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref"><samp class="einst">STYLE</samp></a> elements. The style information
751
 
    is cascaded in the order the elements appear in the <a href="http://www.w3.org/TR/html401/struct/global.html#edef-HEAD" class="noxref"><samp class="einst">
752
 
    HEAD</samp></a>.</p>
753
 
 
754
 
    <div class="note">
755
 
    <p><em><strong>Note.</strong> This specification does not specify how style
756
 
    sheets from different style languages cascade. Authors should avoid mixing
757
 
    style sheet languages.</em></p>
758
 
    </div>
759
 
 
760
 
    <div class="example">
761
 
    <p>In the following example, we specify two alternate style sheets named
762
 
    "compact". If the user selects the "compact" style, the user agent must apply
763
 
    both external style sheets, as well as the persistent "common.css" style sheet.
764
 
    If the user selects the "big print" style, only the alternate style sheet
765
 
    "bigprint.css" and the persistent "common.css" will be applied.</p>
766
 
 
767
 
    <pre>&lt;LINK rel="alternate stylesheet" title="compact" href="small-base.css" type="text/css"&gt;
768
 
    &lt;LINK rel="alternate stylesheet" title="compact" href="small-extras.css" type="text/css"&gt;
769
 
    &lt;LINK rel="alternate stylesheet" title="big print" href="bigprint.css" type="text/css"&gt;
770
 
    &lt;LINK rel="stylesheet" href="common.css" type="text/css"&gt;
771
 
    </pre>
772
 
    </div>
773
 
 
774
 
    <div class="example">
775
 
    <p>Here is a cascade example that involves both the <a href="http://www.w3.org/TR/html401/struct/links.html#edef-LINK" class="noxref"><samp class="einst">
776
 
    LINK</samp></a> and <a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref"><samp class="einst">STYLE</samp></a> elements.</p>
777
 
 
778
 
    <pre>&lt;LINK rel="stylesheet" href="corporate.css" type="text/css"&gt;
779
 
    &lt;LINK rel="stylesheet" href="techreport.css" type="text/css"&gt;
780
 
    &lt;STYLE type="text/css"&gt;
781
 
        p.special { color: rgb(230, 100, 180) }
782
 
    &lt;/STYLE&gt;
783
 
    </pre>
784
 
    </div>
785
 
 
786
 
    <h3><a name="h-14.4.1">14.4.1</a> <span class="index-inst" title="media::and
787
 
    external style sheets|link::and media-dependent style sheets"><a name="media-cascades">Media-dependent cascades</a></span></h3>
788
 
 
789
 
    <p>A cascade may include style sheets applicable to different media. Both <a href="http://www.w3.org/TR/html401/struct/links.html#edef-LINK" class="noxref"><samp class="einst">
790
 
    LINK</samp></a> and <a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref"><samp class="einst">STYLE</samp></a> may be used with the <a href="http://www.w3.org/TR/html401/present/styles.html#adef-media" class="noxref"><samp class="ainst">media</samp></a>
791
 
    attribute. The user agent is then responsible for filtering out those style
792
 
    sheets that do not apply to the current medium.</p>
793
 
 
794
 
    <div class="example">
795
 
    <p>In the following example, we define a cascade where the "corporate" style
796
 
    sheet is provided in several versions: one suited to printing, one for screen
797
 
    use and one for speech-based browsers (useful, say, when reading email in the
798
 
    car). The "techreport" stylesheet applies to all media. The color rule defined
799
 
    by the <a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref"><samp class="einst">
800
 
    STYLE</samp></a> element is used for print and screen but not for aural
801
 
    rendering.</p>
802
 
 
803
 
    <pre>&lt;LINK rel="stylesheet" media="aural" href="corporate-aural.css" type="text/css"&gt;
804
 
    &lt;LINK rel="stylesheet" media="screen" href="corporate-screen.css" type="text/css"&gt;
805
 
    &lt;LINK rel="stylesheet" media="print" href="corporate-print.css" type="text/css"&gt;
806
 
    &lt;LINK rel="stylesheet" href="techreport.css" type="text/css"&gt;
807
 
    &lt;STYLE media="screen, print" type="text/css"&gt;
808
 
        p.special { color: rgb(230, 100, 180) }
809
 
    &lt;/STYLE&gt;
810
 
    </pre>
811
 
    </div>
812
 
 
813
 
    <h3><a name="h-14.4.2">14.4.2</a> Inheritance and cascading</h3>
814
 
 
815
 
    <p>When the user agent wants to render a document, it needs to find values for
816
 
    style properties, e.g. the font family, font style, size, line height, text
817
 
    color and so on. The exact mechanism depends on the style sheet language, but
818
 
    the following description is generally applicable:</p>
819
 
 
820
 
    <p>The cascading mechanism is used when a number of style rules all apply
821
 
    directly to an element. The mechanism allows the user agent to sort the rules
822
 
    by specificity, to determine which rule to apply. If no rule can be found, the
823
 
    next step depends on whether the style property can be inherited or not. Not
824
 
    all properties can be inherited. For these properties the style sheet language
825
 
    provides default values for use when there are no explicit rules for a
826
 
    particular element.</p>
827
 
 
828
 
    <p>If the property can be inherited, the user agent examines the immediately
829
 
    enclosing element to see if a rule applies to that. This process continues
830
 
    until an applicable rule is found. This mechanism allows style sheets to be
831
 
    specified compactly. For instance, authors may specify the font family for all
832
 
    elements within the <a href="http://www.w3.org/TR/html401/struct/global.html#edef-BODY" class="noxref">
833
 
    <samp class="einst">BODY</samp></a> by a single rule that applies to the <a href="http://www.w3.org/TR/html401/struct/global.html#edef-BODY" class="noxref"><samp class="einst">
834
 
    BODY</samp></a> element.</p>
835
 
 
836
 
    <h2><a name="h-14.5">14.5</a> <span class="index-inst" title="user agent::and
837
 
    style data|style sheet::comments to hide|comments::used to hide style sheet
838
 
    data"><a name="hiding">Hiding style data from user agents</a></span></h2>
839
 
 
840
 
    <p>Some style sheet languages support syntax intended to allow authors to hide
841
 
    the content of <a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref"><samp class="einst">STYLE</samp></a> elements from non-conforming user agents.</p>
842
 
 
843
 
    <div class="example">
844
 
    <p>This example illustrates for CSS how to comment out the content of <a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref"><samp class="einst">STYLE</samp></a>
845
 
    elements to ensure that older, non-conforming user agents will not render them
846
 
    as text.</p>
847
 
 
848
 
    <pre>&lt;STYLE type="text/css"&gt;
849
 
    &lt;!--
850
 
       H1 { color: red }
851
 
       P  { color: blue}
852
 
       --&gt;
853
 
    &lt;/STYLE&gt;
854
 
    </pre>
855
 
    </div>
856
 
 
857
 
    <h2><a name="h-14.6">14.6</a> <span class="index-inst" title="HTTP::used to
858
 
    link external style sheets"><a name="idx-HTTP-2">Linking to style sheets with
859
 
    HTTP headers</a></span></h2>
860
 
 
861
 
    <p><em>This section only applies to user agents conforming to versions of HTTP
862
 
    that define a Link header field. Note that HTTP 1.1 as defined by <a rel="biblioentry" href="http://www.w3.org/TR/html401/references.html#ref-RFC2616" class="informref">
863
 
    [RFC2616]</a> does not include a Link header field (refer to section
864
 
    19.6.3).</em></p>
865
 
 
866
 
    <p>Web server managers may find it convenient to configure a server so that a
867
 
    style sheet will be applied to a group of pages. The HTTP <tt>Link</tt> header
868
 
    has the same effect as a <a href="http://www.w3.org/TR/html401/struct/links.html#edef-LINK" class="noxref"><samp class="einst">LINK</samp></a> element with the same attributes
869
 
    and values. Multiple <tt>Link</tt> headers correspond to multiple <a href="http://www.w3.org/TR/html401/struct/links.html#edef-LINK" class="noxref"><samp class="einst">
870
 
    LINK</samp></a> elements occurring in the same order. For instance,</p>
871
 
 
872
 
    <pre>Link: &lt;http://www.acme.com/corporate.css&gt;; REL=stylesheet
873
 
    </pre>
874
 
 
875
 
    <p>corresponds to:</p>
876
 
 
877
 
    <pre>&lt;LINK rel="stylesheet" href="http://www.acme.com/corporate.css"&gt;
878
 
    </pre>
879
 
 
880
 
    <p>It is possible to specify several alternate styles using multiple <tt>
881
 
    Link</tt> headers, and then use the <a href="http://www.w3.org/TR/html401/struct/links.html#adef-rel" class="noxref"><samp class="ainst">rel</samp></a> attribute to determine the
882
 
    default style.</p>
883
 
 
884
 
    <div>
885
 
    <p>In the following example, "compact" is applied by default since it omits the
886
 
    "alternate" keyword for the <a href="http://www.w3.org/TR/html401/struct/links.html#adef-rel" class="noxref"><samp class="ainst">rel</samp></a> attribute.</p>
887
 
 
888
 
    <pre>Link: &lt;compact.css&gt;; rel="stylesheet"; title="compact"
889
 
    Link: &lt;bigprint.css&gt;; rel="alternate stylesheet"; title="big print"
890
 
    </pre>
891
 
    </div>
892
 
 
893
 
    <p>This should also work when HTML documents are sent by email. Some email
894
 
    agents can alter the ordering of <a rel="biblioentry" href="http://www.w3.org/TR/html401/references.html#ref-RFC822" class="informref">[RFC822]</a> headers. To
895
 
    protect against this affecting the cascading order for style sheets specified
896
 
    by <tt>Link</tt> headers, authors can use header concatenation to merge several
897
 
    instances of the same header field. The quote marks are only needed when the
898
 
    attribute values include whitespace. Use SGML entities to reference characters
899
 
    that are otherwise not permitted within HTTP or email headers, or that are
900
 
    likely to be affected by transit through gateways.</p>
901
 
 
902
 
    <p><a href="http://www.w3.org/TR/html401/struct/links.html#edef-LINK" class="noxref"><samp class="einst">
903
 
    LINK</samp></a> and <a href="http://www.w3.org/TR/html401/struct/global.html#edef-META" class="noxref">
904
 
    <samp class="einst">META</samp></a> elements implied by HTTP headers are
905
 
    defined as occurring before any explicit <a href="http://www.w3.org/TR/html401/struct/links.html#edef-LINK" class="noxref"><samp class="einst">
906
 
    LINK</samp></a> and <a href="http://www.w3.org/TR/html401/struct/global.html#edef-META" class="noxref">
907
 
    <samp class="einst">META</samp></a> elements in the document's <a href="http://www.w3.org/TR/html401/struct/global.html#edef-HEAD" class="noxref"><samp class="einst">
908
 
    HEAD</samp></a>.</p>
909
 
 
910
 
    <div class="navbar" align="center">
911
 
    <hr><a href="http://www.w3.org/TR/html401/struct/objects.html">previous</a> &nbsp; <a href="http://www.w3.org/TR/html401/present/graphics.html">next</a> &nbsp; <a href="http://www.w3.org/TR/html401/cover.html#minitoc">contents</a>
912
 
    &nbsp; <a href="http://www.w3.org/TR/html401/index/elements.html">elements</a> &nbsp; <a href="http://www.w3.org/TR/html401/index/attributes.html">attributes</a> &nbsp; <a href="http://www.w3.org/TR/html401/index/list.html">
913
 
    index</a></div>
914
 
 
915
 
<div id="form_container">
916
 
    <form class="yui3-widget-bd" id="theme_form" action="#" method="get">
917
 
        <fieldset>
918
 
            <h3>Update Theme</h3>
919
 
            <label for="font_size">Font size:</label>
920
 
            <input type="text" size="3" id="font_size" value="16px">
921
 
 
922
 
            <label for="heading_color">Heading color:</label>
923
 
            <input type="text" size="12" id="heading_color" value="#005A9C">
924
 
 
925
 
            <label for="link_hover">Link hover backgound:</label>
926
 
            <input type="text" size="12" id="link_hover" value="#ffa">
927
 
        </fieldset>
928
 
        <input type="submit">
929
 
    </form>
930
 
</div>
931
 
 
932
 
 
933
 
<script src="../../build/yui/yui-min.js"></script>
934
 
<script>
935
 
// Create a new YUI instance, requiring stylesheet, overlay, slider, and the
936
 
// dd-plugin to make the overlay draggable
937
 
YUI().use("stylesheet","overlay","slider","dd-plugin", function (Y) {
938
 
 
939
 
    var myStyleSheet = new Y.StyleSheet(),
940
 
        overlayContent = Y.one('#form_container'),
941
 
        overlay,
942
 
        slider,
943
 
        slider_container,
944
 
        fontSizeInput,
945
 
 
946
 
    // Create the Overlay, using the form container as the contentBox.
947
 
    // The form is assigned a class yui-widget-bd that will be automatically
948
 
    // discovered by Overlay to populate the Overlay's body section.
949
 
    // The overlay is positioned in the top right corner, but made draggable
950
 
    // using Y.Plugin.Drag, provided by the dd-plugin module.
951
 
    overlay = new Y.Overlay({
952
 
        srcNode: overlayContent,
953
 
        alignOn: [],
954
 
        width: '225px',
955
 
        align: { points: [ Y.WidgetPositionAlign.TR, Y.WidgetPositionAlign.TR ] },
956
 
        plugins: [ Y.Plugin.Drag ]
957
 
    }).render();
958
 
 
959
 
    // Slider needs a parent element to have the sam skin class for UI skinning
960
 
    overlayContent.addClass('yui3-skin-sam');
961
 
 
962
 
    // Progressively enhance the font-size input with a Slider
963
 
    fontSizeInput = Y.one('#font_size');
964
 
    fontSizeInput.set('type','hidden');
965
 
    fontSizeInput.get('parentNode').insertBefore(
966
 
        Y.Node.create('6 <span></span> 36'),
967
 
        fontSizeInput);
968
 
 
969
 
    slider_container = fontSizeInput.previous( "span" );
970
 
 
971
 
    // Create a Slider to contain font size between 6px and 36px, using the
972
 
    // page's current font size as the initial value.
973
 
    // Set up an event subscriber during construction to update the replaced
974
 
    // input field's value and apply the change to the StyleSheet
975
 
    slider = new Y.Slider({
976
 
        length: '100px',
977
 
        min: 6,
978
 
        max: 36,
979
 
        value: parseInt(Y.one('body').getStyle('fontSize')) || 13,
980
 
        after: {
981
 
            valueChange: function (e) {
982
 
                var size = e.newVal + 'px';
983
 
 
984
 
                this.thumb.set('title', size);
985
 
                fontSizeInput.set('value', size);
986
 
 
987
 
                myStyleSheet.set('body', { fontSize: size });
988
 
            }
989
 
        }
990
 
    }).render( slider_container );
991
 
 
992
 
    // The color inputs are assigned keyup listeners that will update the
993
 
    // StyleSheet if the current input value is a valid CSS color value
994
 
 
995
 
    // The heading input affects all h1s, h2, and h3s
996
 
    Y.on('keyup', function (e) {
997
 
        var color = this.get('value');
998
 
 
999
 
        if (isValidColor(color)) {
1000
 
            myStyleSheet.set('h1, h2, h3', { color: color });
1001
 
        }
1002
 
    }, '#heading_color');
1003
 
 
1004
 
    // The link hover affects the background color of links when they are
1005
 
    // hovered.  There is no way other than via stylesheet modification to
1006
 
    // change pseudo-class styles.
1007
 
    Y.on('keyup', function (e) {
1008
 
        var color = this.get('value');
1009
 
 
1010
 
        if (isValidColor(color)) {
1011
 
            myStyleSheet.set('a:hover', { backgroundColor: color });
1012
 
        }
1013
 
    }, '#link_hover');
1014
 
 
1015
 
    // Progressive form enhancement complete, now prevent the form from
1016
 
    // submitting normally.
1017
 
    Y.one('#theme_form input[type=submit]').remove();
1018
 
 
1019
 
    Y.on('submit', function (e) {
1020
 
        e.halt();
1021
 
    }, '#theme_form');
1022
 
 
1023
 
        // A rudimentary validator to make sure we're not trying to set
1024
 
        // invalid color values in StyleSheet.
1025
 
        function isValidColor(v) {
1026
 
        return /^#[0-9a-f]{3}(?:[0-9a-f]{3})?$/i.test(v) ||
1027
 
               /^rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)$/.test(v) ||
1028
 
               /^[a-z]{3,}$/i.test(v);
1029
 
        }
1030
 
 
1031
 
});
1032
 
</script>
1033
 
 
1034
 
 
1035
 
</body>
1036
 
 
1037
 
</html>