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
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
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<!doctype html>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<html lang="en">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly <title>Style Sheets in HTML documents</title>
66cdef7b58c561872619512e33839803f9673670Luke Smith <link rel="stylesheet" type="text/css" href="{{componentAssets}}/w3.css">
66cdef7b58c561872619512e33839803f9673670Luke Smith <link rel="stylesheet" type="text/css" href="{{componentAssets}}/theme.css">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<div class="navbar" align="center">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly <a href="http://www.w3.org/TR/html401/struct/objects.html">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyprevious</a> <a href="http://www.w3.org/TR/html401/present/graphics.html">next</a> <a href="http://www.w3.org/TR/html401/cover.html#minitoc">contents</a> <a href="http://www.w3.org/TR/html401/index/elements.html">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyelements</a> <a href="http://www.w3.org/TR/html401/index/attributes.html">attributes</a> <a href="http://www.w3.org/TR/html401/index/list.html">index</a>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<h1 align="center"><a name="h-14">14</a> <a name="stylesheets">Style
5cca94d19081e525af1906a3ec18d822e3542b4fJenny DonnellySheets</a></h1>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<div class="subtoc">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p><strong>Contents</strong></p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<li><a class="tocxref" href="#h-14.1">Introduction to style sheets</a></li>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<li><a class="tocxref" href="#h-14.2">Adding style to HTML</a>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<li><a class="tocxref" href="#h-14.2.1">Setting the default style sheet
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellylanguage</a></li>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<li><a class="tocxref" href="#h-14.2.2">Inline style information</a></li>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<li><a class="tocxref" href="#h-14.2.3">Header style information: the <samp class="einst2">STYLE</samp> element</a></li>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<li><a class="tocxref" href="#h-14.2.4">Media types</a></li>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<li><a class="tocxref" href="#h-14.3">External style sheets</a>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<li><a class="tocxref" href="#h-14.3.1">Preferred and alternate style
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellysheets</a></li>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<li><a class="tocxref" href="#h-14.3.2">Specifying external style
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellysheets</a></li>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<li><a class="tocxref" href="#h-14.4">Cascading style sheets</a>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<li><a class="tocxref" href="#h-14.4.1">Media-dependent cascades</a></li>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<li><a class="tocxref" href="#h-14.4.2">Inheritance and cascading</a></li>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<li><a class="tocxref" href="#h-14.5">Hiding style data from user
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyagents</a></li>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<li><a class="tocxref" href="#h-14.6">Linking to style sheets with HTTP
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyheaders</a></li>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<h2><a name="h-14.1">14.1</a> <span class="index-inst" title="style
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellysheet::introduction to"><a name="idx-style_sheet-3">Introduction to style
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellysheets</a></span></h2>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>Style sheets represent a major breakthrough for Web page designers,
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyexpanding their ability to improve the appearance of their pages. In the
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyscientific environments in which the Web was conceived, people are more
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyconcerned with the content of their documents than the presentation. As people
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyfrom wider walks of life discovered the Web, the limitations of HTML became a
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellysource of continuing frustration and authors were forced to sidestep HTML's
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellystylistic limitations. While the intentions have been good -- to improve the
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellypresentation of Web pages -- the techniques for doing so have had unfortunate
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyside effects. These techniques work for some of the people, some of the time,
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellybut not for all of the people, all of the time. They include:</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<li>Using proprietary HTML extensions</li>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<li>Converting text into images</li>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<li>Using images for white space control</li>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<li>Use of tables for page layout</li>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<li>Writing a program instead of using HTML</li>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>These techniques considerably increase the complexity of Web pages, offer
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellylimited flexibility, suffer from interoperability problems, and create
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyhardships for people with disabilities.</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>Style sheets solve these problems at the same time they supersede the
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellylimited range of presentation mechanisms in HTML. Style sheets make it easy to
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyspecify the amount of white space between text lines, the amount lines are
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyindented, the colors used for the text and the backgrounds, the font size and
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellystyle, and a host of other details.</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<div class="example">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>For example, the following short CSS style sheet (stored in the file
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly"special.css"), sets the text color of a paragraph to green and surrounds it
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellywith a solid red border:</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellycolor : green;
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyborder: solid red;
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<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">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny DonnellyLINK</samp></a> element:</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly <LINK href="special.css" rel="stylesheet" type="text/css">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly </HEAD>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly <P class="special">This paragraph should have special green text.
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly </BODY>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>HTML 4 provides support for the following style sheet features:</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<dt><b>Flexible placement of style information</b></dt>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<dd>Placing style sheets in separate files makes them easy to reuse. Sometimes
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyit's useful to include rendering instructions within the document to which they
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyapply, either grouped at the start of the document, or in attributes of the
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyelements throughout the body of the document. To make it easier to manage style
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyon a site basis, this specification describes how to use HTTP headers to set
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellythe style sheets to be applied to a document.</dd>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<dt><b>Independence from specific style sheet languages</b></dt>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<dd>This specification doesn't tie HTML to any particular style sheet language.
5cca94d19081e525af1906a3ec18d822e3542b4fJenny DonnellyThis allows for a range of such languages to be used, for instance simple ones
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyfor the majority of users and much more complex ones for the minority of users
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellywith highly specialized needs. The examples included below all use the CSS
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly(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
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellysheet languages would be possible.</dd>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<dt><b>Cascading</b></dt>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<dd>This is the capability provided by some style sheet languages such as CSS
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyto allow style information from several sources to be blended together. These
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellycould be, for instance, corporate style guidelines, styles common to a group of
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellydocuments, and styles specific to a single document. By storing these
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyseparately, style sheets can be reused, simplifying authoring and making more
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyeffective use of network caching. The cascade defines an ordered sequence of
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellystyle sheets where rules in later sheets have greater precedence than earlier
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyones. Not all style sheet languages support cascading.</dd>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<dt><span class="index-inst" title="accessibility::and style sheets"><a name="idx-accessibility"><b>Media dependencies</b></a></span></dt>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<dd>HTML allows authors to specify documents in a media-independent way. This
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyallows users to access Web pages using a wide variety of devices and media,
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellye.g., graphical displays for computers running Windows, Macintosh OS, and X11,
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellydevices for television sets, specially adapted phones and PDA-based portable
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellydevices, speech-based browsers, and braille-based tactile devices.
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>Style sheets, by contrast, apply to specific media or media groups. A style
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellysheet intended for screen use may be applicable when printing, but is of little
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyuse for speech-based browsers. This specification allows you to define the
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellybroad categories of media a given style sheet is applicable to. This allows
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyuser agents to avoid retrieving inappropriate style sheets. Style sheet
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellylanguages may include features for describing media dependencies within the
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellysame style sheet.</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<dt><b>Alternate styles</b></dt>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<dd>Authors may wish to offer readers several ways to view a document. For
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyinstance, a style sheet for rendering compact documents with small fonts, or
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyone that specifies larger fonts for increased legibility. This specification
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyallows authors to specify a preferred style sheet as well as alternates that
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellytarget specific users or media. User agents should give users the opportunity
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyto select from among alternate style sheets or to switch off style sheets
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyaltogether.</dd>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<dt><b>Performance concerns</b></dt>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<dd>Some people have voiced concerns over performance issues for style sheets.
5cca94d19081e525af1906a3ec18d822e3542b4fJenny DonnellyFor instance, retrieving an external style sheet may delay the full
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellypresentation for the user. A similar situation arises if the document head
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyincludes a lengthy set of style rules.
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>The current proposal addresses these issues by allowing authors to include
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyrendering instructions within each HTML element. The rendering information is
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellythen always available by the time the user agent wants to render each
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>In many cases, authors will take advantage of a common style sheet for a
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellygroup of documents. In this case, distributing style rules throughout the
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellydocument will actually lead to worse performance than using a linked style
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellysheet, since for most documents, the style sheet will already be present in the
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellylocal cache. The public availability of good style sheets will encourage this
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<h2><a name="h-14.2">14.2</a> Adding style to HTML</h2>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<div class="note">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p><em><strong>Note.</strong> The sample default style sheet for HTML 4 that is
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyincluded 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
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyfor each element. Authors and implementors alike might find this a useful
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyresource.</em></p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>HTML documents may contain style sheet rules directly in them or they may
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyimport style sheets.</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>Any style sheet language may be used with HTML. A simple style sheet
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellylanguage may suffice for the needs of most users, but other languages may be
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellymore suited to highly specialized needs. This specification uses the style
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellylanguage "Cascading Style Sheets" (<a rel="biblioentry" href="http://www.w3.org/TR/html401/references.html#ref-CSS1" class="informref">[CSS1]</a>), abbreviated CSS,
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyfor examples.</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>The <a href="http://www.w3.org/TR/html401/types.html#type-style">syntax of style data</a> depends on
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellythe style sheet language.</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<h3><a name="h-14.2.1">14.2.1</a> <span class="index-inst" title="default::style sheet language|style sheet
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellylanguage::default|HTTP::Content-Style-Type header|Content-Style-Type header"><a name="default-style">Setting the default style sheet language</a></span></h3>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>Authors must specify the style sheet language of style information
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyassociated with an HTML document.</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<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
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellysheet language for a document. For example, to set the default to CSS, authors
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyshould put the following declaration in the <a href="http://www.w3.org/TR/html401/struct/global.html#edef-HEAD" class="noxref"><samp class="einst">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny DonnellyHEAD</samp></a> of their documents:</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<pre><META http-equiv="Content-Style-Type" content="text/css">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>The default style sheet language may also be set with HTTP headers. The
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyabove <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>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<pre>Content-Style-Type: text/css
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>User agents should determine the default style sheet language for a document
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyaccording to the following steps (highest to lowest priority):</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<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",
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellythe last one in the character stream determines the default style sheet
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellylanguage.</li>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<li>Otherwise, if any HTTP headers specify the "Content-Style-Type", the last
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyone in the character stream determines the default style sheet language.</li>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<li>Otherwise, the default style sheet language is "text/css".</li>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<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>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyattribute but which don't define a default style sheet language are incorrect.
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<span class="index-inst" title="authoring tool::and default style sheet
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellylanguage"><a name="idx-authoring_tool">Authoring tools</a></span> should
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellygenerate 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">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny DonnellyMETA</samp></a> declaration) so that user agents do not have to rely on a
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellydefault of "text/css".</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<h3><a name="h-14.2.2">14.2.2</a> <a name="style-element">Inline style
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyinformation</a></h3>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<div class="adef-list">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p><em>Attribute definitions</em></p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<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>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<dd>This attribute specifies style information for the current element.</dd>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<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">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellysyntax</a> of the value of the <a href="http://www.w3.org/TR/html401/present/styles.html#adef-style" class="noxref">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<samp class="ainst">style</samp></a> attribute is determined by the <a href="#default-style">default style sheet language</a>. For example, for [[CSS2]]
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyinline style, use the declaration block syntax described in section 4.1.8
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly(without curly brace delimiters).</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<div class="example">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>This CSS example sets color and font size information for the text in a
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyspecific paragraph.</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<pre><P style="font-size: 12pt; color: fuchsia">Aren't style sheets wonderful?
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>In CSS, property declarations have the form "name : value" and are separated
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyby a semi-colon.</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>To specify style information for more than one element, authors should use
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellythe <samp class="edef">STYLE</samp> element. For optimal flexibility, authors
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyshould define styles in external style sheets.</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<h3><a name="h-14.2.3">14.2.3</a> <a name="style-group">Header style
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyinformation</a>: the <a name="edef-STYLE"><samp class="edef">STYLE</samp></a>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<div class="dtd-fragment">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<pre class="dtd-fragment"><!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 -->
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<!ATTLIST STYLE
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly <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 --
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly <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 --
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly <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 --
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly <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 --
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p><em>Start tag: <strong>required</strong>, End tag: <strong>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyrequired</strong></em></p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<div class="adef-list">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p><em>Attribute definitions</em></p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<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>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<dd>This attribute specifies the style sheet language of the element's contents
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyand overrides the default style sheet language. The style sheet language is
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyspecified as a content type (e.g., "text/css"). Authors must supply a value for
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellythis attribute; there is no default value for this attribute.</dd>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<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>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<dd>This attribute specifies the intended destination medium for style
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyinformation. It may be a single media descriptor or a comma-separated list. The
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellydefault value for this attribute is "screen".</dd>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<div class="aref-list">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p><em>Attributes defined elsewhere</em></p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<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">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellydir</samp></a> (<a href="http://www.w3.org/TR/html401/struct/dirlang.html#bidirection">text
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellydirection</a>)</li>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<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
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellytitle</a>)</li>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>The <a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref"><samp class="einst">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny DonnellySTYLE</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
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref"><samp class="einst">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny DonnellySTYLE</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>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>User agents that don't support style sheets, or don't support the specific
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellystyle sheet language used by a <a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<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">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny DonnellySTYLE</samp></a> element. <span class="index-inst" title="error::rendering
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellystyle rules in STYLE"><a name="idx-error">It is an error</a></span> to render
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellythe content as part of the document's text. Some style sheet languages support
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellysyntax for <a href="#hiding">hiding the content</a> from non-conforming user
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>The <a href="http://www.w3.org/TR/html401/types.html#type-style">syntax of style data</a> depends on
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellythe style sheet language.</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>Some style sheet implementations may allow a wider variety of rules in the
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref"><samp class="einst">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny DonnellySTYLE</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,
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyrules may be declared within a <a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<samp class="einst">STYLE</samp></a> element for:</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<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>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyelements, 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>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<li>All instances of an HTML element belonging to a specific class (i.e., whose
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<a href="http://www.w3.org/TR/html401/struct/global.html#adef-class" class="noxref"><samp class="ainst">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyclass</samp></a> attribute is set to some value).</li>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<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">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyid</samp></a> attribute is set to some value).</li>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>Rules for style rule precedences and inheritance depend on the style sheet
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<div class="example">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<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">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny DonnellyH1</samp></a> element in the document and centers it on the page.</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<pre><HEAD>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly <STYLE type="text/css">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly H1 {border-width: 1; border: solid; text-align: center}
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly </STYLE>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<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">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny DonnellyH1</samp></a> elements of a specific class, we modify it as follows:</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<pre><HEAD>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly <STYLE type="text/css">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly H1.myclass {border-width: 1; border: solid; text-align: center}
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly </STYLE>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly <H1 class="myclass"> This H1 is affected by our style </H1>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly <H1> This one is not affected by our style </H1>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>Finally, to limit the scope of the style information to a single instance of
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<a href="http://www.w3.org/TR/html401/struct/global.html#edef-H1" class="noxref"><samp class="einst">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny DonnellyH1</samp></a>, set the <a href="http://www.w3.org/TR/html401/struct/global.html#adef-id" class="noxref">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<samp class="ainst">id</samp></a> attribute:</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<pre><HEAD>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly <STYLE type="text/css">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly #myid {border-width: 1; border: solid; text-align: center}
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly </STYLE>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly <H1 class="myclass"> This H1 is not affected </H1>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly <H1 id="myid"> This H1 is affected by style </H1>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly <H1> This H1 is not affected </H1>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<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
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyalmost every HTML element, two elements, <a href="http://www.w3.org/TR/html401/struct/global.html#edef-DIV" class="noxref"><samp class="einst">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny DonnellyDIV</samp></a> and <a href="http://www.w3.org/TR/html401/struct/global.html#edef-SPAN" class="noxref">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<samp class="einst">SPAN</samp></a>, are particularly useful in that they do
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellynot 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
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellywith style sheets, these elements allow users to extend HTML indefinitely,
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyparticularly 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">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyid</samp></a> attributes.</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<div class="example">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<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">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny DonnellySPAN</samp></a> element to set the font style of the first few words of a
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyparagraph to small caps.</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<pre><HEAD>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly <STYLE type="text/css">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly SPAN.sc-ex { font-variant: small-caps }
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly </STYLE>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly <P><SPAN class="sc-ex">The first</SPAN> few words of
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly this paragraph are in small-caps.
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<div class="example">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<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">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyclass</samp></a> attribute to set the text justification for a series of
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyparagraphs that make up the abstract section of a scientific article. This
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellystyle 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">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyclass</samp></a> attribute elsewhere in the document.</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<pre><HEAD>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly <STYLE type="text/css">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly DIV.Abstract { text-align: justify }
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly </STYLE>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly <DIV class="Abstract">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly <P>The Chieftain product range is our market winner for
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly the coming year. This report sets out how to position
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly Chieftain against competing products.
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly <P>Chieftain replaces the Commander range, which will
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly remain on the price list until further notice.
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<h3><a name="h-14.2.4">14.2.4</a> <span class="index-inst" title="media::used
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellywith style sheets|style sheet::target media for"><a name="media-types">Media
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellytypes</a></span></h3>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>HTML allows authors to design documents that take advantage of the
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellycharacteristics of the media where the document is to be rendered (e.g.,
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellygraphical displays, television screens, handheld devices, speech-based
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellybrowsers, 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>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyattribute, authors allow user agents to load and apply style sheets
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyselectively. Please consult the list of recognized <a href="http://www.w3.org/TR/html401/types.html#type-media-descriptors">media descriptors</a>.</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<div class="example">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<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">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny DonnellyH1</samp></a> elements. When projected in a business meeting, all instances
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellywill be blue. When printed, all instances will be centered.</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<pre><HEAD>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly <STYLE type="text/css" media="projection">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly H1 { color: blue}
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly </STYLE>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly <STYLE type="text/css" media="print">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly H1 { text-align: center }
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly </STYLE>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>This example adds sound effects to anchors for use in speech output:</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<pre> <STYLE type="text/css" media="aural">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly A { cue-before: uri(bell.aiff); cue-after: uri(dong.wav)}
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly </STYLE>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>Media control is particularly interesting when applied to external style
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellysheets since user agents can save time by retrieving from the network only
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellythose style sheets that apply to the current device. For instance, speech-based
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellybrowsers can avoid downloading style sheets designed for visual rendering. See
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellythe section on <a href="#media-cascades">media-dependent cascades</a> for more
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyinformation.</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<h2><a name="h-14.3">14.3</a> <span class="index-inst" title="style
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellysheet::external"><a name="style-external">External style sheets</a></span></h2>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>Authors may separate style sheets from HTML documents. This offers several
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<li>Authors and Web site managers may share style sheets across a number of
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellydocuments (and sites).</li>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<li>Authors may change the style sheet without requiring modifications to the
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellydocument.</li>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<li>User agents may load style sheets selectively (based on media
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellydescriptions).</li>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<h3><a name="h-14.3.1">14.3.1</a> Preferred and alternate style sheets</h3>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>HTML allows authors to associate any number of external style sheets with a
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellydocument. The style sheet language defines how multiple external style sheets
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyinteract (for example, the CSS "cascade" rules).</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p><span class="index-def" title="style sheet::alternate|alternate style
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellysheets"><a name="didx-style_sheet">Authors may specify a number of mutually
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyexclusive style sheets called <dfn>alternate</dfn> style sheets.</a></span>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny DonnellyUsers may select their favorite among these depending on their preferences. For
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyinstance, an author may specify one style sheet designed for small screens and
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyanother for users with weak vision (e.g., large fonts). User agents should
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyallow users to select from alternate style sheets.</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p><span class="index-def" title="style sheet::preferred|preferred style
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellysheets"><a name="didx-style_sheet-1">The author may specify that one of the
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyalternates is a <dfn>preferred</dfn> style sheet.</a></span> User agents should
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyapply the author's preferred style sheet unless the user has selected a
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellydifferent alternate.</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>Authors may group several alternate style sheets (including the author's
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellypreferred style sheets) under a single <dfn>style name</dfn>. When a user
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyselects a named style, the user agent must apply all style sheets with that
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyname. User agents must not apply alternate style sheets with a different style
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyname. The section on <a href="#specifying-external">specifying external style
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellysheets</a> explains how to name a group of style sheets.</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p><span class="index-def" title="style sheet::persistent|persistent style
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellysheets"><a name="didx-style_sheet-2">Authors may also specify <dfn>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellypersistent</dfn> style sheets that user agents must apply in addition to any
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyalternate style sheet.</a></span></p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>User agents must respect <a href="http://www.w3.org/TR/html401/types.html#type-media-descriptors">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellymedia descriptors</a> when applying any style sheet.</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>User agents should also allow users to disable the author's style sheets
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyentirely, in which case the user agent must not apply any persistent or
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyalternate style sheets.</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<h3><a name="h-14.3.2">14.3.2</a> <span class="index-inst" title="style
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellysheet::specification of external|link::and external style sheets"><a name="specifying-external">Specifying external style sheets</a></span></h3>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>Authors specify external style sheets with the following attributes of the
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<a href="http://www.w3.org/TR/html401/struct/links.html#edef-LINK" class="noxref"><samp class="einst">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny DonnellyLINK</samp></a> element:</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<li>Set the value of <a href="http://www.w3.org/TR/html401/struct/links.html#adef-href" class="noxref">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<samp class="ainst">href</samp></a> to the location of the style sheet file.
5cca94d19081e525af1906a3ec18d822e3542b4fJenny DonnellyThe 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">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<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
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellylanguage of the linked (style sheet) resource. This allows the user agent to
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyavoid downloading a style sheet for an unsupported style sheet language.</li>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<li>Specify that the style sheet is persistent, preferred, or alternate:
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<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">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyrel</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">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellytitle</samp></a> attribute.</li>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<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">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyrel</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">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellytitle</samp></a> attribute.</li>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<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">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyrel</samp></a> attribute to "alternate stylesheet" and name the style sheet
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellywith the <a href="http://www.w3.org/TR/html401/struct/global.html#adef-title" class="noxref"><samp class="ainst">title</samp></a> attribute.</li>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>User agents should provide a means for users to view and pick from the list
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyof alternate styles. The value of the <a href="http://www.w3.org/TR/html401/struct/global.html#adef-title" class="noxref"><samp class="ainst">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellytitle</samp></a> attribute is recommended as the name of each choice.</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<div class="example">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>In this example, we first specify a persistent style sheet located in the
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyfile <tt>mystyle.css</tt>:</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<pre><LINK href="mystyle.css" rel="stylesheet" type="text/css">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<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
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellystyle sheet:</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<pre> <LINK href="mystyle.css" title="compact" rel="stylesheet" type="text/css">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<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">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyrel</samp></a> attribute makes it an alternate style sheet:</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<pre><LINK href="mystyle.css" title="Medium" rel="alternate stylesheet" type="text/css">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>For more information on external style sheets, please consult the section on
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<a href="http://www.w3.org/TR/html401/struct/links.html#linksandss">links and external style
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellysheets.</a></p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p><span class="index-inst" title="HTTP::Default-Style header|style
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellysheet::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
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellysheet.</span> For example, to set the preferred style sheet to "compact" (see
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellythe 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">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny DonnellyHEAD</samp></a>:</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<div class="example">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<pre><META http-equiv="Default-Style" content="compact">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>The preferred style sheet may also be specified with HTTP headers. The above
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<a href="http://www.w3.org/TR/html401/struct/global.html#edef-META" class="noxref"><samp class="einst">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny DonnellyMETA</samp></a> declaration is equivalent to the HTTP header:</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<div class="example">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<pre>Default-Style: "compact"
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>If two or more <a href="http://www.w3.org/TR/html401/struct/global.html#edef-META" class="noxref">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<samp class="einst">META</samp></a> declarations or HTTP headers specify the
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellypreferred style sheet, the last one takes precedence. HTTP headers are
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyconsidered to occur earlier than the document <a href="http://www.w3.org/TR/html401/struct/global.html#edef-HEAD" class="noxref"><samp class="einst">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny DonnellyHEAD</samp></a> for this purpose.</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<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
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyfirst one takes precedence.</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>Preferred style sheets specified with <a href="http://www.w3.org/TR/html401/struct/global.html#edef-META" class="noxref"><samp class="einst">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny DonnellyMETA</samp></a> or HTTP headers have precedence over those specified with the
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<a href="http://www.w3.org/TR/html401/struct/links.html#edef-LINK" class="noxref"><samp class="einst">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny DonnellyLINK</samp></a> element.</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<h2><a name="h-14.4">14.4</a> <span class="index-inst" title="style
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellysheet::cascading|cascading style sheets"><a name="idx-style_sheet-11">Cascading
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellystyle sheets</a></span></h2>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p><dfn>Cascading</dfn> style sheet languages such as CSS allow style
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyinformation from several sources to be blended together. However, not all style
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellysheet languages support cascading. To define a cascade, authors specify a
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellysequence 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
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyis 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">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny DonnellyHEAD</samp></a>.</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<div class="note">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p><em><strong>Note.</strong> This specification does not specify how style
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellysheets from different style languages cascade. Authors should avoid mixing
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellystyle sheet languages.</em></p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<div class="example">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>In the following example, we specify two alternate style sheets named
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly"compact". If the user selects the "compact" style, the user agent must apply
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyboth external style sheets, as well as the persistent "common.css" style sheet.
5cca94d19081e525af1906a3ec18d822e3542b4fJenny DonnellyIf the user selects the "big print" style, only the alternate style sheet
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly"bigprint.css" and the persistent "common.css" will be applied.</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<pre><LINK rel="alternate stylesheet" title="compact" href="small-base.css" type="text/css">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<LINK rel="alternate stylesheet" title="compact" href="small-extras.css" type="text/css">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<LINK rel="alternate stylesheet" title="big print" href="bigprint.css" type="text/css">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<LINK rel="stylesheet" href="common.css" type="text/css">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<div class="example">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<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">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny DonnellyLINK</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>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<pre><LINK rel="stylesheet" href="corporate.css" type="text/css">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<LINK rel="stylesheet" href="techreport.css" type="text/css">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<STYLE type="text/css">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly p.special { color: rgb(230, 100, 180) }
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly</STYLE>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<h3><a name="h-14.4.1">14.4.1</a> <span class="index-inst" title="media::and
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyexternal style sheets|link::and media-dependent style sheets"><a name="media-cascades">Media-dependent cascades</a></span></h3>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<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">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny DonnellyLINK</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>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyattribute. The user agent is then responsible for filtering out those style
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellysheets that do not apply to the current medium.</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<div class="example">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>In the following example, we define a cascade where the "corporate" style
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellysheet is provided in several versions: one suited to printing, one for screen
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyuse and one for speech-based browsers (useful, say, when reading email in the
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellycar). The "techreport" stylesheet applies to all media. The color rule defined
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyby the <a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref"><samp class="einst">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny DonnellySTYLE</samp></a> element is used for print and screen but not for aural
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyrendering.</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<pre><LINK rel="stylesheet" media="aural" href="corporate-aural.css" type="text/css">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<LINK rel="stylesheet" media="screen" href="corporate-screen.css" type="text/css">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<LINK rel="stylesheet" media="print" href="corporate-print.css" type="text/css">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<LINK rel="stylesheet" href="techreport.css" type="text/css">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<STYLE media="screen, print" type="text/css">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly p.special { color: rgb(230, 100, 180) }
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly</STYLE>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<h3><a name="h-14.4.2">14.4.2</a> Inheritance and cascading</h3>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>When the user agent wants to render a document, it needs to find values for
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellystyle properties, e.g. the font family, font style, size, line height, text
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellycolor and so on. The exact mechanism depends on the style sheet language, but
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellythe following description is generally applicable:</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>The cascading mechanism is used when a number of style rules all apply
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellydirectly to an element. The mechanism allows the user agent to sort the rules
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyby specificity, to determine which rule to apply. If no rule can be found, the
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellynext step depends on whether the style property can be inherited or not. Not
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyall properties can be inherited. For these properties the style sheet language
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyprovides default values for use when there are no explicit rules for a
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyparticular element.</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>If the property can be inherited, the user agent examines the immediately
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyenclosing element to see if a rule applies to that. This process continues
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyuntil an applicable rule is found. This mechanism allows style sheets to be
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyspecified compactly. For instance, authors may specify the font family for all
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyelements within the <a href="http://www.w3.org/TR/html401/struct/global.html#edef-BODY" class="noxref">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<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">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny DonnellyBODY</samp></a> element.</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<h2><a name="h-14.5">14.5</a> <span class="index-inst" title="user agent::and
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellystyle data|style sheet::comments to hide|comments::used to hide style sheet
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellydata"><a name="hiding">Hiding style data from user agents</a></span></h2>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>Some style sheet languages support syntax intended to allow authors to hide
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellythe 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>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<div class="example">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<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>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyelements to ensure that older, non-conforming user agents will not render them
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<pre><STYLE type="text/css">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly H1 { color: red }
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly P { color: blue}
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly</STYLE>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<h2><a name="h-14.6">14.6</a> <span class="index-inst" title="HTTP::used to
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellylink external style sheets"><a name="idx-HTTP-2">Linking to style sheets with
5cca94d19081e525af1906a3ec18d822e3542b4fJenny DonnellyHTTP headers</a></span></h2>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p><em>This section only applies to user agents conforming to versions of HTTP
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellythat 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">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly[RFC2616]</a> does not include a Link header field (refer to section
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly19.6.3).</em></p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>Web server managers may find it convenient to configure a server so that a
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellystyle sheet will be applied to a group of pages. The HTTP <tt>Link</tt> header
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyhas 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
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyand 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">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny DonnellyLINK</samp></a> elements occurring in the same order. For instance,</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<pre>Link: <http://www.acme.com/corporate.css>; REL=stylesheet
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>corresponds to:</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<pre><LINK rel="stylesheet" href="http://www.acme.com/corporate.css">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>It is possible to specify several alternate styles using multiple <tt>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny DonnellyLink</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
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellydefault style.</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>In the following example, "compact" is applied by default since it omits the
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly"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>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<pre>Link: <compact.css>; rel="stylesheet"; title="compact"
5cca94d19081e525af1906a3ec18d822e3542b4fJenny DonnellyLink: <bigprint.css>; rel="alternate stylesheet"; title="big print"
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p>This should also work when HTML documents are sent by email. Some email
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyagents 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
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyprotect against this affecting the cascading order for style sheets specified
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyby <tt>Link</tt> headers, authors can use header concatenation to merge several
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyinstances of the same header field. The quote marks are only needed when the
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyattribute values include whitespace. Use SGML entities to reference characters
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellythat are otherwise not permitted within HTTP or email headers, or that are
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellylikely to be affected by transit through gateways.</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<p><a href="http://www.w3.org/TR/html401/struct/links.html#edef-LINK" class="noxref"><samp class="einst">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny DonnellyLINK</samp></a> and <a href="http://www.w3.org/TR/html401/struct/global.html#edef-META" class="noxref">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<samp class="einst">META</samp></a> elements implied by HTTP headers are
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellydefined as occurring before any explicit <a href="http://www.w3.org/TR/html401/struct/links.html#edef-LINK" class="noxref"><samp class="einst">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny DonnellyLINK</samp></a> and <a href="http://www.w3.org/TR/html401/struct/global.html#edef-META" class="noxref">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<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">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny DonnellyHEAD</samp></a>.</p>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<div class="navbar" align="center">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<hr><a href="http://www.w3.org/TR/html401/struct/objects.html">previous</a> <a href="http://www.w3.org/TR/html401/present/graphics.html">next</a> <a href="http://www.w3.org/TR/html401/cover.html#minitoc">contents</a>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly <a href="http://www.w3.org/TR/html401/index/elements.html">elements</a> <a href="http://www.w3.org/TR/html401/index/attributes.html">attributes</a> <a href="http://www.w3.org/TR/html401/index/list.html">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnellyindex</a></div>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly<div id="form_container">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly <form class="yui3-widget-bd" id="theme_form" action="#" method="get">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly <h3>Update Theme</h3>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly <label for="font_size">Font size:</label>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly <input type="text" size="3" id="font_size" value="16px">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly <label for="heading_color">Heading color:</label>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly <input type="text" size="12" id="heading_color" value="#005A9C">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly <label for="link_hover">Link hover backgound:</label>
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly <input type="text" size="12" id="link_hover" value="#ffa">
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly <input type="submit">
66cdef7b58c561872619512e33839803f9673670Luke Smith<script src="{{yuiSeedUrl}}"></script>
66cdef7b58c561872619512e33839803f9673670Luke SmithYUI().use('stylesheet', 'overlay', 'dd-plugin', 'slider', function (Y) {
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly var myStyleSheet = new Y.StyleSheet(),
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly overlayContent = Y.one('#form_container'),
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly slider_container,
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly fontSizeInput,
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // Create the Overlay, using the form container as the contentBox.
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // The form is assigned a class yui-widget-bd that will be automatically
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // discovered by Overlay to populate the Overlay's body section.
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // The overlay is positioned in the top right corner, but made draggable
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // using Y.Plugin.Drag, provided by the dd-plugin module.
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly overlay = new Y.Overlay({
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly srcNode: overlayContent,
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly width: '225px',
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly align: { points: [ Y.WidgetPositionAlign.TR, Y.WidgetPositionAlign.TR ] },
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // Slider needs a parent element to have the sam skin class for UI skinning
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // Progressively enhance the font-size input with a Slider
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly fontSizeInput = Y.one('#font_size');
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly fontSizeInput.set('type','hidden');
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly fontSizeInput.get('parentNode').insertBefore(
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly Y.Node.create('6 <span></span> 36'),
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly fontSizeInput);
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly slider_container = fontSizeInput.previous( "span" );
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // Create a Slider to contain font size between 6px and 36px, using the
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // page's current font size as the initial value.
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // Set up an event subscriber during construction to update the replaced
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // input field's value and apply the change to the StyleSheet
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly slider = new Y.Slider({
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly length: '100px',
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly value: parseInt(Y.one('body').getStyle('fontSize')) || 13,
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly valueChange: function (e) {
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly var size = e.newVal + 'px';
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly this.thumb.set('title', size);
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly myStyleSheet.set('body', { fontSize: size });
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly }).render( slider_container );
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // The color inputs are assigned keyup listeners that will update the
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // StyleSheet if the current input value is a valid CSS color value
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // The heading input affects all h1s, h2, and h3s
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly Y.on('keyup', function (e) {
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly var color = this.get('value');
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly if (isValidColor(color)) {
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly myStyleSheet.set('h1, h2, h3', { color: color });
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly }, '#heading_color');
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // The link hover affects the background color of links when they are
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // hovered. There is no way other than via stylesheet modification to
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // change pseudo-class styles.
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly Y.on('keyup', function (e) {
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly var color = this.get('value');
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly if (isValidColor(color)) {
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly myStyleSheet.set('a:hover', { backgroundColor: color });
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly }, '#link_hover');
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // Progressive form enhancement complete, now prevent the form from
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // submitting normally.
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly Y.one('#theme_form input[type=submit]').remove();
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly Y.on('submit', function (e) {
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly }, '#theme_form');
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // A rudimentary validator to make sure we're not trying to set
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly // invalid color values in StyleSheet.
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly function isValidColor(v) {
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly return /^#[0-9a-f]{3}(?:[0-9a-f]{3})?$/i.test(v) ||
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly /^rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)$/.test(v) ||
5cca94d19081e525af1906a3ec18d822e3542b4fJenny Donnelly /^[a-z]{3,}$/i.test(v);