h1,h2,h3,h4,h5,h6,
#demo label {
    color: #e76300;
}

.example .promo {
    background-color: #89d;
}

#toc ul li.active,
#toc ul li a:hover {
    background-color: #f82;
}

Starting from scratch

For the sake of illustration, we'll leave the form in our demo unstyled, then apply a skin to it when we create our working YAHOO.util.StyleSheet instance.

Add some style to the form

We'll put our code in a YAHOO.demo.PageTheme namespace. In this namespace, we'll add an init() method that we'll schedule to execute when the DOM is ready. We'll seed the init() method by creating an instance of YAHOO.util.StyleSheet and passing the constructor all the CSS to skin the form.

This is enough to create a new StyleSheet instance, hosting a <style> element with our form's skin. Note that this is done for illustration only. In general, this approach should be avoided in production environments unless there's a compelling reason. Static CSS should be served as .css files linked from <link> elements.

Set some rule styles from the form inputs

Now we'll add the important stuff. Listening for the form submission to change the style rules. We'll cache the inputs in the init() method and set up the submit listener to call a new method update().

And that's it! If you have an interactive console such as FireBug, you can play around with the StyleSheet instance at YAHOO.demo.PageTheme.theme.

Full code listing

The full code listing for this example is below, including the source for isValidColor. The full markup was included above.

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.