<div class="intro">

<p>In this example, we'll use a snapshot of the <a href="http://www.w3.org/TR/html401/present/styles.html">W3C HTML 4.01 specification for Style Sheets</a> and add a custom dynamic StyleSheet to apply some color and font size changes.</p>

<p>A Progressive enhancement strategy is used to extract a static form on the page into a draggable Overlay. Additionally, one of the form inputs is replaced with a Slider. Enter any valid CSS color value into the other inputs (e.g. `#123456`, `#135`, `rgb(0,0,0)`, or `red`).</p>

</div>

<div class="example newwindow">

<a href="stylesheet-theme-example.html" target="_blank" class="button">

View Example in New Window

</a>

</div>

<h3 class="first">Full code listing</h3>

<h4 id="markup">Markup</h4>

<p>The markup as stated above is a local snapshot of the HTML 4.01 spec, but with the following markup added to the end of the <code>&lt;body&gt;</code> to show a progressive enhancement model.</p>

```

{{>stylesheet-theme-markup}}

```

<h4>JavaScript</h4>

```

{{>stylesheet-theme-js}}

```

<h4>CSS</h4>

<p>This is the CSS added to the page to skin the Overlay and its content.</p>

```

{{>stylesheet-theme-css}}

```