--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/cm/media/js/lib/yui/yui_3.10.3/docs/stylesheet/stylesheet-theme-example.html Tue Jul 16 14:29:46 2013 +0200
@@ -0,0 +1,1055 @@
+<!DOCTYPE html>
+<html lang="en" class="yui3-loading">
+<head>
+ <meta charset="utf-8">
+ <title>Adjusting a Page Theme on the Fly</title>
+ <link rel="stylesheet" type="text/css" href="../assets/stylesheet/w3.css">
+<style>
+/* For supporting browsers, the overlay is rendered semi-transparent with
+ * fancy rounded corners */
+.yui3-overlay {
+ background: rgba(128,128,128,0.3);
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+ border-radius: 10px;
+ padding: 7px;
+ cursor: move;
+}
+.yui3-overlay-content {
+ background: rgba(205,205,205,0.3);
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+ border-radius: 10px;
+ padding: 1px;
+}
+.yui3-overlay form {
+ background: #f2fbff url(../assets/stylesheet/gradient-promo.png) repeat-x scroll 0 0;
+ border: 2px solid #fff;
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+ border-radius: 10px;
+ margin: 0;
+ padding: 0;
+ font-size: 13px;
+}
+.yui3-overlay fieldset {
+ border: 1px solid #cde;
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+ border-radius: 10px;
+ margin: 0;
+ padding: 20px;
+}
+.yui3-overlay h3 {
+ border-bottom: 2px solid #fff;
+ color: #479;
+ background: transparent;
+ margin: 0;
+ font-size: 175%;
+}
+.yui3-overlay label {
+ display: block;
+ margin: 1.3em 0 0.5ex;
+ font-weight: bold;
+ color: #003;
+}
+.yui3-overlay p {
+ margin: 2em 0 0;
+}
+/* override the move cursor for the Slider */
+.yui3-overlay .yui3-slider:hover {
+ cursor: default;
+}
+</style>
+
+</head>
+<body>
+ <div class="navbar" align="center">
+ <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> <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">index</a>
+
+ <hr></div>
+
+ <h1 align="center"><a name="h-14">14</a> <a name="stylesheets">Style
+ Sheets</a></h1>
+
+ <div class="subtoc">
+ <p><strong>Contents</strong></p>
+
+ <ol>
+ <li><a class="tocxref" href="#h-14.1">Introduction to style sheets</a></li>
+
+ <li><a class="tocxref" href="#h-14.2">Adding style to HTML</a>
+
+ <ol>
+ <li><a class="tocxref" href="#h-14.2.1">Setting the default style sheet
+ language</a></li>
+
+ <li><a class="tocxref" href="#h-14.2.2">Inline style information</a></li>
+
+ <li><a class="tocxref" href="#h-14.2.3">Header style information: the <samp class="einst2">STYLE</samp> element</a></li>
+
+ <li><a class="tocxref" href="#h-14.2.4">Media types</a></li>
+ </ol>
+ </li>
+
+ <li><a class="tocxref" href="#h-14.3">External style sheets</a>
+
+ <ol>
+ <li><a class="tocxref" href="#h-14.3.1">Preferred and alternate style
+ sheets</a></li>
+
+ <li><a class="tocxref" href="#h-14.3.2">Specifying external style
+ sheets</a></li>
+ </ol>
+ </li>
+
+ <li><a class="tocxref" href="#h-14.4">Cascading style sheets</a>
+
+ <ol>
+ <li><a class="tocxref" href="#h-14.4.1">Media-dependent cascades</a></li>
+
+ <li><a class="tocxref" href="#h-14.4.2">Inheritance and cascading</a></li>
+ </ol>
+ </li>
+
+ <li><a class="tocxref" href="#h-14.5">Hiding style data from user
+ agents</a></li>
+
+ <li><a class="tocxref" href="#h-14.6">Linking to style sheets with HTTP
+ headers</a></li>
+ </ol>
+ </div>
+
+ <h2><a name="h-14.1">14.1</a> <span class="index-inst" title="style
+ sheet::introduction to"><a name="idx-style_sheet-3">Introduction to style
+ sheets</a></span></h2>
+
+ <p>Style sheets represent a major breakthrough for Web page designers,
+ expanding their ability to improve the appearance of their pages. In the
+ scientific environments in which the Web was conceived, people are more
+ concerned with the content of their documents than the presentation. As people
+ from wider walks of life discovered the Web, the limitations of HTML became a
+ source of continuing frustration and authors were forced to sidestep HTML's
+ stylistic limitations. While the intentions have been good -- to improve the
+ presentation of Web pages -- the techniques for doing so have had unfortunate
+ side effects. These techniques work for some of the people, some of the time,
+ but not for all of the people, all of the time. They include:</p>
+
+ <ul>
+ <li>Using proprietary HTML extensions</li>
+
+ <li>Converting text into images</li>
+
+ <li>Using images for white space control</li>
+
+ <li>Use of tables for page layout</li>
+
+ <li>Writing a program instead of using HTML</li>
+ </ul>
+
+ <p>These techniques considerably increase the complexity of Web pages, offer
+ limited flexibility, suffer from interoperability problems, and create
+ hardships for people with disabilities.</p>
+
+ <p>Style sheets solve these problems at the same time they supersede the
+ limited range of presentation mechanisms in HTML. Style sheets make it easy to
+ specify the amount of white space between text lines, the amount lines are
+ indented, the colors used for the text and the backgrounds, the font size and
+ style, and a host of other details.</p>
+
+ <div class="example">
+ <p>For example, the following short CSS style sheet (stored in the file
+ "special.css"), sets the text color of a paragraph to green and surrounds it
+ with a solid red border:</p>
+
+ <pre>P.special {
+ color : green;
+ border: solid red;
+ }
+ </pre>
+
+ <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">
+ LINK</samp></a> element:</p>
+
+ <pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd">
+ <HTML>
+ <HEAD>
+ <LINK href="special.css" rel="stylesheet" type="text/css">
+ </HEAD>
+ <BODY>
+ <P class="special">This paragraph should have special green text.
+ </BODY>
+ </HTML>
+ </pre>
+ </div>
+
+ <p>HTML 4 provides support for the following style sheet features:</p>
+
+ <dl>
+ <dt><b>Flexible placement of style information</b></dt>
+
+ <dd>Placing style sheets in separate files makes them easy to reuse. Sometimes
+ it's useful to include rendering instructions within the document to which they
+ apply, either grouped at the start of the document, or in attributes of the
+ elements throughout the body of the document. To make it easier to manage style
+ on a site basis, this specification describes how to use HTTP headers to set
+ the style sheets to be applied to a document.</dd>
+
+ <dt><b>Independence from specific style sheet languages</b></dt>
+
+ <dd>This specification doesn't tie HTML to any particular style sheet language.
+ This allows for a range of such languages to be used, for instance simple ones
+ for the majority of users and much more complex ones for the minority of users
+ with highly specialized needs. The examples included below all use the CSS
+ (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
+ sheet languages would be possible.</dd>
+
+ <dt><b>Cascading</b></dt>
+
+ <dd>This is the capability provided by some style sheet languages such as CSS
+ to allow style information from several sources to be blended together. These
+ could be, for instance, corporate style guidelines, styles common to a group of
+ documents, and styles specific to a single document. By storing these
+ separately, style sheets can be reused, simplifying authoring and making more
+ effective use of network caching. The cascade defines an ordered sequence of
+ style sheets where rules in later sheets have greater precedence than earlier
+ ones. Not all style sheet languages support cascading.</dd>
+
+ <dt><span class="index-inst" title="accessibility::and style sheets"><a name="idx-accessibility"><b>Media dependencies</b></a></span></dt>
+
+ <dd>HTML allows authors to specify documents in a media-independent way. This
+ allows users to access Web pages using a wide variety of devices and media,
+ e.g., graphical displays for computers running Windows, Macintosh OS, and X11,
+ devices for television sets, specially adapted phones and PDA-based portable
+ devices, speech-based browsers, and braille-based tactile devices.
+
+ <p>Style sheets, by contrast, apply to specific media or media groups. A style
+ sheet intended for screen use may be applicable when printing, but is of little
+ use for speech-based browsers. This specification allows you to define the
+ broad categories of media a given style sheet is applicable to. This allows
+ user agents to avoid retrieving inappropriate style sheets. Style sheet
+ languages may include features for describing media dependencies within the
+ same style sheet.</p>
+ </dd>
+
+ <dt><b>Alternate styles</b></dt>
+
+ <dd>Authors may wish to offer readers several ways to view a document. For
+ instance, a style sheet for rendering compact documents with small fonts, or
+ one that specifies larger fonts for increased legibility. This specification
+ allows authors to specify a preferred style sheet as well as alternates that
+ target specific users or media. User agents should give users the opportunity
+ to select from among alternate style sheets or to switch off style sheets
+ altogether.</dd>
+
+ <dt><b>Performance concerns</b></dt>
+
+ <dd>Some people have voiced concerns over performance issues for style sheets.
+ For instance, retrieving an external style sheet may delay the full
+ presentation for the user. A similar situation arises if the document head
+ includes a lengthy set of style rules.
+
+ <p>The current proposal addresses these issues by allowing authors to include
+ rendering instructions within each HTML element. The rendering information is
+ then always available by the time the user agent wants to render each
+ element.</p>
+
+ <p>In many cases, authors will take advantage of a common style sheet for a
+ group of documents. In this case, distributing style rules throughout the
+ document will actually lead to worse performance than using a linked style
+ sheet, since for most documents, the style sheet will already be present in the
+ local cache. The public availability of good style sheets will encourage this
+ effect.</p>
+ </dd>
+ </dl>
+
+ <h2><a name="h-14.2">14.2</a> Adding style to HTML</h2>
+
+ <div class="note">
+ <p><em><strong>Note.</strong> The sample default style sheet for HTML 4 that is
+ 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
+ for each element. Authors and implementors alike might find this a useful
+ resource.</em></p>
+ </div>
+
+ <p>HTML documents may contain style sheet rules directly in them or they may
+ import style sheets.</p>
+
+ <p>Any style sheet language may be used with HTML. A simple style sheet
+ language may suffice for the needs of most users, but other languages may be
+ more suited to highly specialized needs. This specification uses the style
+ language "Cascading Style Sheets" (<a rel="biblioentry" href="http://www.w3.org/TR/html401/references.html#ref-CSS1" class="informref">[CSS1]</a>), abbreviated CSS,
+ for examples.</p>
+
+ <p>The <a href="http://www.w3.org/TR/html401/types.html#type-style">syntax of style data</a> depends on
+ the style sheet language.</p>
+
+ <h3><a name="h-14.2.1">14.2.1</a> <span class="index-inst" title="default::style sheet language|style sheet
+ language::default|HTTP::Content-Style-Type header|Content-Style-Type header"><a name="default-style">Setting the default style sheet language</a></span></h3>
+
+ <p>Authors must specify the style sheet language of style information
+ associated with an HTML document.</p>
+
+ <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
+ sheet language for a document. For example, to set the default to CSS, authors
+ 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">
+ HEAD</samp></a> of their documents:</p>
+
+ <pre><META http-equiv="Content-Style-Type" content="text/css">
+ </pre>
+
+ <p>The default style sheet language may also be set with HTTP headers. The
+ 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>
+
+ <pre>Content-Style-Type: text/css
+ </pre>
+
+ <p>User agents should determine the default style sheet language for a document
+ according to the following steps (highest to lowest priority):</p>
+
+ <ol>
+ <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",
+ the last one in the character stream determines the default style sheet
+ language.</li>
+
+ <li>Otherwise, if any HTTP headers specify the "Content-Style-Type", the last
+ one in the character stream determines the default style sheet language.</li>
+
+ <li>Otherwise, the default style sheet language is "text/css".</li>
+ </ol>
+
+ <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>
+ attribute but which don't define a default style sheet language are incorrect.
+ <span class="index-inst" title="authoring tool::and default style sheet
+ language"><a name="idx-authoring_tool">Authoring tools</a></span> should
+ 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">
+ META</samp></a> declaration) so that user agents do not have to rely on a
+ default of "text/css".</p>
+
+ <h3><a name="h-14.2.2">14.2.2</a> <a name="style-element">Inline style
+ information</a></h3>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions</em></p>
+
+ <dl>
+ <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>
+
+ <dd>This attribute specifies style information for the current element.</dd>
+ </dl>
+ </div>
+
+ <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">
+ syntax</a> of the value of the <a href="http://www.w3.org/TR/html401/present/styles.html#adef-style" class="noxref">
+ <samp class="ainst">style</samp></a> attribute is determined by the <a href="#default-style">default style sheet language</a>. For example, for [[CSS2]]
+ inline style, use the declaration block syntax described in section 4.1.8
+ (without curly brace delimiters).</p>
+
+ <div class="example">
+ <p>This CSS example sets color and font size information for the text in a
+ specific paragraph.</p>
+
+ <pre><P style="font-size: 12pt; color: fuchsia">Aren't style sheets wonderful?
+ </pre>
+
+ <p>In CSS, property declarations have the form "name : value" and are separated
+ by a semi-colon.</p>
+ </div>
+
+ <p>To specify style information for more than one element, authors should use
+ the <samp class="edef">STYLE</samp> element. For optimal flexibility, authors
+ should define styles in external style sheets.</p>
+
+ <h3><a name="h-14.2.3">14.2.3</a> <a name="style-group">Header style
+ information</a>: the <a name="edef-STYLE"><samp class="edef">STYLE</samp></a>
+ element</h3>
+
+ <div class="dtd-fragment">
+ <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 -->
+ <!ATTLIST STYLE
+ <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 --
+ <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 --
+ <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 --
+ <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 --
+ >
+ </pre>
+ </div>
+
+ <p><em>Start tag: <strong>required</strong>, End tag: <strong>
+ required</strong></em></p>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions</em></p>
+
+ <dl>
+ <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>
+
+ <dd>This attribute specifies the style sheet language of the element's contents
+ and overrides the default style sheet language. The style sheet language is
+ specified as a content type (e.g., "text/css"). Authors must supply a value for
+ this attribute; there is no default value for this attribute.</dd>
+
+ <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>
+
+ <dd>This attribute specifies the intended destination medium for style
+ information. It may be a single media descriptor or a comma-separated list. The
+ default value for this attribute is "screen".</dd>
+ </dl>
+ </div>
+
+ <div class="aref-list">
+ <p><em>Attributes defined elsewhere</em></p>
+
+ <ul>
+ <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">
+ dir</samp></a> (<a href="http://www.w3.org/TR/html401/struct/dirlang.html#bidirection">text
+ direction</a>)</li>
+
+ <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
+ title</a>)</li>
+ </ul>
+ </div>
+
+ <p>The <a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref"><samp class="einst">
+ 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
+ <a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref"><samp class="einst">
+ 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>
+
+ <p>User agents that don't support style sheets, or don't support the specific
+ style sheet language used by a <a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref">
+ <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">
+ STYLE</samp></a> element. <span class="index-inst" title="error::rendering
+ style rules in STYLE"><a name="idx-error">It is an error</a></span> to render
+ the content as part of the document's text. Some style sheet languages support
+ syntax for <a href="#hiding">hiding the content</a> from non-conforming user
+ agents.</p>
+
+ <p>The <a href="http://www.w3.org/TR/html401/types.html#type-style">syntax of style data</a> depends on
+ the style sheet language.</p>
+
+ <p>Some style sheet implementations may allow a wider variety of rules in the
+ <a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref"><samp class="einst">
+ 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,
+ rules may be declared within a <a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref">
+ <samp class="einst">STYLE</samp></a> element for:</p>
+
+ <ul>
+ <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>
+ 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>
+
+ <li>All instances of an HTML element belonging to a specific class (i.e., whose
+ <a href="http://www.w3.org/TR/html401/struct/global.html#adef-class" class="noxref"><samp class="ainst">
+ class</samp></a> attribute is set to some value).</li>
+
+ <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">
+ id</samp></a> attribute is set to some value).</li>
+ </ul>
+
+ <p>Rules for style rule precedences and inheritance depend on the style sheet
+ language.</p>
+
+ <div class="example">
+ <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">
+ H1</samp></a> element in the document and centers it on the page.</p>
+
+ <pre><HEAD>
+ <STYLE type="text/css">
+ H1 {border-width: 1; border: solid; text-align: center}
+ </STYLE>
+ </HEAD>
+ </pre>
+
+ <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">
+ H1</samp></a> elements of a specific class, we modify it as follows:</p>
+
+ <pre><HEAD>
+ <STYLE type="text/css">
+ H1.myclass {border-width: 1; border: solid; text-align: center}
+ </STYLE>
+ </HEAD>
+ <BODY>
+ <H1 class="myclass"> This H1 is affected by our style </H1>
+ <H1> This one is not affected by our style </H1>
+ </BODY>
+ </pre>
+
+ <p>Finally, to limit the scope of the style information to a single instance of
+ <a href="http://www.w3.org/TR/html401/struct/global.html#edef-H1" class="noxref"><samp class="einst">
+ H1</samp></a>, set the <a href="http://www.w3.org/TR/html401/struct/global.html#adef-id" class="noxref">
+ <samp class="ainst">id</samp></a> attribute:</p>
+
+ <pre><HEAD>
+ <STYLE type="text/css">
+ #myid {border-width: 1; border: solid; text-align: center}
+ </STYLE>
+ </HEAD>
+ <BODY>
+ <H1 class="myclass"> This H1 is not affected </H1>
+ <H1 id="myid"> This H1 is affected by style </H1>
+ <H1> This H1 is not affected </H1>
+ </BODY>
+ </pre>
+ </div>
+
+ <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
+ almost every HTML element, two elements, <a href="http://www.w3.org/TR/html401/struct/global.html#edef-DIV" class="noxref"><samp class="einst">
+ DIV</samp></a> and <a href="http://www.w3.org/TR/html401/struct/global.html#edef-SPAN" class="noxref">
+ <samp class="einst">SPAN</samp></a>, are particularly useful in that they do
+ 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
+ with style sheets, these elements allow users to extend HTML indefinitely,
+ 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">
+ id</samp></a> attributes.</p>
+
+ <div class="example">
+ <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">
+ SPAN</samp></a> element to set the font style of the first few words of a
+ paragraph to small caps.</p>
+
+ <pre><HEAD>
+ <STYLE type="text/css">
+ SPAN.sc-ex { font-variant: small-caps }
+ </STYLE>
+ </HEAD>
+ <BODY>
+ <P><SPAN class="sc-ex">The first</SPAN> few words of
+ this paragraph are in small-caps.
+ </BODY>
+ </pre>
+ </div>
+
+ <div class="example">
+ <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">
+ class</samp></a> attribute to set the text justification for a series of
+ paragraphs that make up the abstract section of a scientific article. This
+ 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">
+ class</samp></a> attribute elsewhere in the document.</p>
+
+ <pre><HEAD>
+ <STYLE type="text/css">
+ DIV.Abstract { text-align: justify }
+ </STYLE>
+ </HEAD>
+ <BODY>
+ <DIV class="Abstract">
+ <P>The Chieftain product range is our market winner for
+ the coming year. This report sets out how to position
+ Chieftain against competing products.
+
+ <P>Chieftain replaces the Commander range, which will
+ remain on the price list until further notice.
+ </DIV>
+ </BODY>
+ </pre>
+ </div>
+
+ <h3><a name="h-14.2.4">14.2.4</a> <span class="index-inst" title="media::used
+ with style sheets|style sheet::target media for"><a name="media-types">Media
+ types</a></span></h3>
+
+ <p>HTML allows authors to design documents that take advantage of the
+ characteristics of the media where the document is to be rendered (e.g.,
+ graphical displays, television screens, handheld devices, speech-based
+ 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>
+ attribute, authors allow user agents to load and apply style sheets
+ selectively. Please consult the list of recognized <a href="http://www.w3.org/TR/html401/types.html#type-media-descriptors">media descriptors</a>.</p>
+
+ <div class="example">
+ <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">
+ H1</samp></a> elements. When projected in a business meeting, all instances
+ will be blue. When printed, all instances will be centered.</p>
+
+ <pre><HEAD>
+ <STYLE type="text/css" media="projection">
+ H1 { color: blue}
+ </STYLE>
+
+ <STYLE type="text/css" media="print">
+ H1 { text-align: center }
+ </STYLE>
+ </pre>
+
+ <p>This example adds sound effects to anchors for use in speech output:</p>
+
+ <pre> <STYLE type="text/css" media="aural">
+ A { cue-before: uri(bell.aiff); cue-after: uri(dong.wav)}
+ </STYLE>
+ </HEAD>
+ </pre>
+ </div>
+
+ <p>Media control is particularly interesting when applied to external style
+ sheets since user agents can save time by retrieving from the network only
+ those style sheets that apply to the current device. For instance, speech-based
+ browsers can avoid downloading style sheets designed for visual rendering. See
+ the section on <a href="#media-cascades">media-dependent cascades</a> for more
+ information.</p>
+
+ <h2><a name="h-14.3">14.3</a> <span class="index-inst" title="style
+ sheet::external"><a name="style-external">External style sheets</a></span></h2>
+
+ <p>Authors may separate style sheets from HTML documents. This offers several
+ benefits:</p>
+
+ <ul>
+ <li>Authors and Web site managers may share style sheets across a number of
+ documents (and sites).</li>
+
+ <li>Authors may change the style sheet without requiring modifications to the
+ document.</li>
+
+ <li>User agents may load style sheets selectively (based on media
+ descriptions).</li>
+ </ul>
+
+ <h3><a name="h-14.3.1">14.3.1</a> Preferred and alternate style sheets</h3>
+
+ <p>HTML allows authors to associate any number of external style sheets with a
+ document. The style sheet language defines how multiple external style sheets
+ interact (for example, the CSS "cascade" rules).</p>
+
+ <p><span class="index-def" title="style sheet::alternate|alternate style
+ sheets"><a name="didx-style_sheet">Authors may specify a number of mutually
+ exclusive style sheets called <dfn>alternate</dfn> style sheets.</a></span>
+ Users may select their favorite among these depending on their preferences. For
+ instance, an author may specify one style sheet designed for small screens and
+ another for users with weak vision (e.g., large fonts). User agents should
+ allow users to select from alternate style sheets.</p>
+
+ <p><span class="index-def" title="style sheet::preferred|preferred style
+ sheets"><a name="didx-style_sheet-1">The author may specify that one of the
+ alternates is a <dfn>preferred</dfn> style sheet.</a></span> User agents should
+ apply the author's preferred style sheet unless the user has selected a
+ different alternate.</p>
+
+ <p>Authors may group several alternate style sheets (including the author's
+ preferred style sheets) under a single <dfn>style name</dfn>. When a user
+ selects a named style, the user agent must apply all style sheets with that
+ name. User agents must not apply alternate style sheets with a different style
+ name. The section on <a href="#specifying-external">specifying external style
+ sheets</a> explains how to name a group of style sheets.</p>
+
+ <p><span class="index-def" title="style sheet::persistent|persistent style
+ sheets"><a name="didx-style_sheet-2">Authors may also specify <dfn>
+ persistent</dfn> style sheets that user agents must apply in addition to any
+ alternate style sheet.</a></span></p>
+
+ <p>User agents must respect <a href="http://www.w3.org/TR/html401/types.html#type-media-descriptors">
+ media descriptors</a> when applying any style sheet.</p>
+
+ <p>User agents should also allow users to disable the author's style sheets
+ entirely, in which case the user agent must not apply any persistent or
+ alternate style sheets.</p>
+
+ <h3><a name="h-14.3.2">14.3.2</a> <span class="index-inst" title="style
+ sheet::specification of external|link::and external style sheets"><a name="specifying-external">Specifying external style sheets</a></span></h3>
+
+ <p>Authors specify external style sheets with the following attributes of the
+ <a href="http://www.w3.org/TR/html401/struct/links.html#edef-LINK" class="noxref"><samp class="einst">
+ LINK</samp></a> element:</p>
+
+ <ul>
+ <li>Set the value of <a href="http://www.w3.org/TR/html401/struct/links.html#adef-href" class="noxref">
+ <samp class="ainst">href</samp></a> to the location of the style sheet file.
+ 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">
+ URI</a>.</li>
+
+ <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
+ language of the linked (style sheet) resource. This allows the user agent to
+ avoid downloading a style sheet for an unsupported style sheet language.</li>
+
+ <li>Specify that the style sheet is persistent, preferred, or alternate:
+
+ <ul>
+ <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">
+ 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">
+ title</samp></a> attribute.</li>
+
+ <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">
+ 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">
+ title</samp></a> attribute.</li>
+
+ <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">
+ rel</samp></a> attribute to "alternate 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">title</samp></a> attribute.</li>
+ </ul>
+ </li>
+ </ul>
+
+ <p>User agents should provide a means for users to view and pick from the list
+ 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">
+ title</samp></a> attribute is recommended as the name of each choice.</p>
+
+ <div class="example">
+ <p>In this example, we first specify a persistent style sheet located in the
+ file <tt>mystyle.css</tt>:</p>
+
+ <pre><LINK href="mystyle.css" rel="stylesheet" type="text/css">
+ </pre>
+
+ <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
+ style sheet:</p>
+
+ <pre> <LINK href="mystyle.css" title="compact" rel="stylesheet" type="text/css">
+ </pre>
+
+ <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">
+ rel</samp></a> attribute makes it an alternate style sheet:</p>
+
+ <pre><LINK href="mystyle.css" title="Medium" rel="alternate stylesheet" type="text/css">
+ </pre>
+ </div>
+
+ <p>For more information on external style sheets, please consult the section on
+ <a href="http://www.w3.org/TR/html401/struct/links.html#linksandss">links and external style
+ sheets.</a></p>
+
+ <p><span class="index-inst" title="HTTP::Default-Style header|style
+ 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
+ sheet.</span> For example, to set the preferred style sheet to "compact" (see
+ 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">
+ HEAD</samp></a>:</p>
+
+ <div class="example">
+ <pre><META http-equiv="Default-Style" content="compact">
+ </pre>
+ </div>
+
+ <p>The preferred style sheet may also be specified with HTTP headers. The 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>
+
+ <div class="example">
+ <pre>Default-Style: "compact"
+ </pre>
+ </div>
+
+ <p>If two or more <a href="http://www.w3.org/TR/html401/struct/global.html#edef-META" class="noxref">
+ <samp class="einst">META</samp></a> declarations or HTTP headers specify the
+ preferred style sheet, the last one takes precedence. HTTP headers are
+ 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">
+ HEAD</samp></a> for this purpose.</p>
+
+ <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
+ first one takes precedence.</p>
+
+ <p>Preferred style sheets specified with <a href="http://www.w3.org/TR/html401/struct/global.html#edef-META" class="noxref"><samp class="einst">
+ META</samp></a> or HTTP headers have precedence over those specified with the
+ <a href="http://www.w3.org/TR/html401/struct/links.html#edef-LINK" class="noxref"><samp class="einst">
+ LINK</samp></a> element.</p>
+
+ <h2><a name="h-14.4">14.4</a> <span class="index-inst" title="style
+ sheet::cascading|cascading style sheets"><a name="idx-style_sheet-11">Cascading
+ style sheets</a></span></h2>
+
+ <p><dfn>Cascading</dfn> style sheet languages such as CSS allow style
+ information from several sources to be blended together. However, not all style
+ sheet languages support cascading. To define a cascade, authors specify a
+ 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
+ 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">
+ HEAD</samp></a>.</p>
+
+ <div class="note">
+ <p><em><strong>Note.</strong> This specification does not specify how style
+ sheets from different style languages cascade. Authors should avoid mixing
+ style sheet languages.</em></p>
+ </div>
+
+ <div class="example">
+ <p>In the following example, we specify two alternate style sheets named
+ "compact". If the user selects the "compact" style, the user agent must apply
+ both external style sheets, as well as the persistent "common.css" style sheet.
+ If the user selects the "big print" style, only the alternate style sheet
+ "bigprint.css" and the persistent "common.css" will be applied.</p>
+
+ <pre><LINK rel="alternate stylesheet" title="compact" href="small-base.css" type="text/css">
+ <LINK rel="alternate stylesheet" title="compact" href="small-extras.css" type="text/css">
+ <LINK rel="alternate stylesheet" title="big print" href="bigprint.css" type="text/css">
+ <LINK rel="stylesheet" href="common.css" type="text/css">
+ </pre>
+ </div>
+
+ <div class="example">
+ <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">
+ 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>
+
+ <pre><LINK rel="stylesheet" href="corporate.css" type="text/css">
+ <LINK rel="stylesheet" href="techreport.css" type="text/css">
+ <STYLE type="text/css">
+ p.special { color: rgb(230, 100, 180) }
+ </STYLE>
+ </pre>
+ </div>
+
+ <h3><a name="h-14.4.1">14.4.1</a> <span class="index-inst" title="media::and
+ external style sheets|link::and media-dependent style sheets"><a name="media-cascades">Media-dependent cascades</a></span></h3>
+
+ <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">
+ 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>
+ attribute. The user agent is then responsible for filtering out those style
+ sheets that do not apply to the current medium.</p>
+
+ <div class="example">
+ <p>In the following example, we define a cascade where the "corporate" style
+ sheet is provided in several versions: one suited to printing, one for screen
+ use and one for speech-based browsers (useful, say, when reading email in the
+ car). The "techreport" stylesheet applies to all media. The color rule defined
+ by the <a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" class="noxref"><samp class="einst">
+ STYLE</samp></a> element is used for print and screen but not for aural
+ rendering.</p>
+
+ <pre><LINK rel="stylesheet" media="aural" href="corporate-aural.css" type="text/css">
+ <LINK rel="stylesheet" media="screen" href="corporate-screen.css" type="text/css">
+ <LINK rel="stylesheet" media="print" href="corporate-print.css" type="text/css">
+ <LINK rel="stylesheet" href="techreport.css" type="text/css">
+ <STYLE media="screen, print" type="text/css">
+ p.special { color: rgb(230, 100, 180) }
+ </STYLE>
+ </pre>
+ </div>
+
+ <h3><a name="h-14.4.2">14.4.2</a> Inheritance and cascading</h3>
+
+ <p>When the user agent wants to render a document, it needs to find values for
+ style properties, e.g. the font family, font style, size, line height, text
+ color and so on. The exact mechanism depends on the style sheet language, but
+ the following description is generally applicable:</p>
+
+ <p>The cascading mechanism is used when a number of style rules all apply
+ directly to an element. The mechanism allows the user agent to sort the rules
+ by specificity, to determine which rule to apply. If no rule can be found, the
+ next step depends on whether the style property can be inherited or not. Not
+ all properties can be inherited. For these properties the style sheet language
+ provides default values for use when there are no explicit rules for a
+ particular element.</p>
+
+ <p>If the property can be inherited, the user agent examines the immediately
+ enclosing element to see if a rule applies to that. This process continues
+ until an applicable rule is found. This mechanism allows style sheets to be
+ specified compactly. For instance, authors may specify the font family for all
+ elements within the <a href="http://www.w3.org/TR/html401/struct/global.html#edef-BODY" class="noxref">
+ <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">
+ BODY</samp></a> element.</p>
+
+ <h2><a name="h-14.5">14.5</a> <span class="index-inst" title="user agent::and
+ style data|style sheet::comments to hide|comments::used to hide style sheet
+ data"><a name="hiding">Hiding style data from user agents</a></span></h2>
+
+ <p>Some style sheet languages support syntax intended to allow authors to hide
+ 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>
+
+ <div class="example">
+ <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>
+ elements to ensure that older, non-conforming user agents will not render them
+ as text.</p>
+
+ <pre><STYLE type="text/css">
+ <!--
+ H1 { color: red }
+ P { color: blue}
+ -->
+ </STYLE>
+ </pre>
+ </div>
+
+ <h2><a name="h-14.6">14.6</a> <span class="index-inst" title="HTTP::used to
+ link external style sheets"><a name="idx-HTTP-2">Linking to style sheets with
+ HTTP headers</a></span></h2>
+
+ <p><em>This section only applies to user agents conforming to versions of HTTP
+ 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">
+ [RFC2616]</a> does not include a Link header field (refer to section
+ 19.6.3).</em></p>
+
+ <p>Web server managers may find it convenient to configure a server so that a
+ style sheet will be applied to a group of pages. The HTTP <tt>Link</tt> header
+ 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
+ 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">
+ LINK</samp></a> elements occurring in the same order. For instance,</p>
+
+ <pre>Link: <http://www.acme.com/corporate.css>; REL=stylesheet
+ </pre>
+
+ <p>corresponds to:</p>
+
+ <pre><LINK rel="stylesheet" href="http://www.acme.com/corporate.css">
+ </pre>
+
+ <p>It is possible to specify several alternate styles using multiple <tt>
+ 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
+ default style.</p>
+
+ <div>
+ <p>In the following example, "compact" is applied by default since it omits the
+ "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>
+
+ <pre>Link: <compact.css>; rel="stylesheet"; title="compact"
+ Link: <bigprint.css>; rel="alternate stylesheet"; title="big print"
+ </pre>
+ </div>
+
+ <p>This should also work when HTML documents are sent by email. Some email
+ 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
+ protect against this affecting the cascading order for style sheets specified
+ by <tt>Link</tt> headers, authors can use header concatenation to merge several
+ instances of the same header field. The quote marks are only needed when the
+ attribute values include whitespace. Use SGML entities to reference characters
+ that are otherwise not permitted within HTTP or email headers, or that are
+ likely to be affected by transit through gateways.</p>
+
+ <p><a href="http://www.w3.org/TR/html401/struct/links.html#edef-LINK" class="noxref"><samp class="einst">
+ LINK</samp></a> and <a href="http://www.w3.org/TR/html401/struct/global.html#edef-META" class="noxref">
+ <samp class="einst">META</samp></a> elements implied by HTTP headers are
+ defined as occurring before any explicit <a href="http://www.w3.org/TR/html401/struct/links.html#edef-LINK" class="noxref"><samp class="einst">
+ LINK</samp></a> and <a href="http://www.w3.org/TR/html401/struct/global.html#edef-META" class="noxref">
+ <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">
+ HEAD</samp></a>.</p>
+
+ <div class="navbar" align="center">
+ <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>
+ <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">
+ index</a></div>
+
+<div id="form_container">
+ <form class="yui3-widget-bd" id="theme_form" action="#" method="get">
+ <fieldset>
+ <h3>Update Theme</h3>
+ <label for="font_size">Font size:</label>
+ <input type="text" size="3" id="font_size" value="16px">
+
+ <label for="heading_color">Heading color:</label>
+ <input type="text" size="12" id="heading_color" value="#005A9C">
+
+ <label for="link_hover">Link hover backgound:</label>
+ <input type="text" size="12" id="link_hover" value="#ffa">
+ </fieldset>
+ <input type="submit">
+ </form>
+</div>
+
+
+<script src="../../build/yui/yui-min.js"></script>
+<script>
+// Create a new YUI instance, requiring stylesheet, overlay, slider, and the
+// dd-plugin to make the overlay draggable
+YUI().use("stylesheet","overlay","slider","dd-plugin", function (Y) {
+
+ var myStyleSheet = new Y.StyleSheet(),
+ overlayContent = Y.one('#form_container'),
+ overlay,
+ slider,
+ slider_container,
+ fontSizeInput,
+
+ // Create the Overlay, using the form container as the contentBox.
+ // The form is assigned a class yui-widget-bd that will be automatically
+ // discovered by Overlay to populate the Overlay's body section.
+ // The overlay is positioned in the top right corner, but made draggable
+ // using Y.Plugin.Drag, provided by the dd-plugin module.
+ overlay = new Y.Overlay({
+ srcNode: overlayContent,
+ alignOn: [],
+ width: '225px',
+ align: { points: [ Y.WidgetPositionAlign.TR, Y.WidgetPositionAlign.TR ] },
+ plugins: [ Y.Plugin.Drag ]
+ }).render();
+
+ // Slider needs a parent element to have the sam skin class for UI skinning
+ overlayContent.addClass('yui3-skin-sam');
+
+ // Progressively enhance the font-size input with a Slider
+ fontSizeInput = Y.one('#font_size');
+ fontSizeInput.set('type','hidden');
+ fontSizeInput.get('parentNode').insertBefore(
+ Y.Node.create('6 <span></span> 36'),
+ fontSizeInput);
+
+ slider_container = fontSizeInput.previous( "span" );
+
+ // Create a Slider to contain font size between 6px and 36px, using the
+ // page's current font size as the initial value.
+ // Set up an event subscriber during construction to update the replaced
+ // input field's value and apply the change to the StyleSheet
+ slider = new Y.Slider({
+ length: '100px',
+ min: 6,
+ max: 36,
+ value: parseInt(Y.one('body').getStyle('fontSize')) || 13,
+ after: {
+ valueChange: function (e) {
+ var size = e.newVal + 'px';
+
+ this.thumb.set('title', size);
+ fontSizeInput.set('value', size);
+
+ myStyleSheet.set('body', { fontSize: size });
+ }
+ }
+ }).render( slider_container );
+
+ // The color inputs are assigned keyup listeners that will update the
+ // StyleSheet if the current input value is a valid CSS color value
+
+ // The heading input affects all h1s, h2, and h3s
+ Y.on('keyup', function (e) {
+ var color = this.get('value');
+
+ if (isValidColor(color)) {
+ myStyleSheet.set('h1, h2, h3', { color: color });
+ }
+ }, '#heading_color');
+
+ // The link hover affects the background color of links when they are
+ // hovered. There is no way other than via stylesheet modification to
+ // change pseudo-class styles.
+ Y.on('keyup', function (e) {
+ var color = this.get('value');
+
+ if (isValidColor(color)) {
+ myStyleSheet.set('a:hover', { backgroundColor: color });
+ }
+ }, '#link_hover');
+
+ // Progressive form enhancement complete, now prevent the form from
+ // submitting normally.
+ Y.one('#theme_form input[type=submit]').remove();
+
+ Y.on('submit', function (e) {
+ e.halt();
+ }, '#theme_form');
+
+ // A rudimentary validator to make sure we're not trying to set
+ // invalid color values in StyleSheet.
+ function isValidColor(v) {
+ return /^#[0-9a-f]{3}(?:[0-9a-f]{3})?$/i.test(v) ||
+ /^rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)$/.test(v) ||
+ /^[a-z]{3,}$/i.test(v);
+ }
+
+});
+</script>
+
+
+<script>
+YUI.Env.Tests = {
+ examples: [],
+ project: '../assets',
+ assets: '../assets/stylesheet',
+ name: 'stylesheet-theme',
+ title: 'Adjusting a Page Theme on the Fly',
+ newWindow: '',
+ auto: false
+};
+YUI.Env.Tests.examples.push('stylesheet-theme');
+YUI.Env.Tests.examples.push('photo-browser');
+
+</script>
+<script src="../assets/yui/test-runner.js"></script>
+
+
+
+</body>
+
+</html>