In this example, we'll use a snapshot of the W3C HTML 4.01 specification for Style Sheets and add a custom dynamic StyleSheet to apply some color and font size changes.

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`).

View Example in New Window

Full code listing

Markup

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 <body> to show a progressive enhancement model.

``` {{>stylesheet-theme-markup}} ```

JavaScript

``` {{>stylesheet-theme-js}} ```

CSS

This is the CSS added to the page to skin the Overlay and its content.

``` {{>stylesheet-theme-css}} ```