finally, putting our website skin library to use.

stylesheets are linked in the <head> section of an HTML page. first, we link any unnamed stylesheets. these stylesheets are always active, and provide any style instructions for your page, regardless of which skin may be chosen. for example, you might always use the same body fonts, or a stylesheet intended for print media might hide all the decorative and navigational elements of the page.

  <link rel="stylesheet" type="text/css" media="screen"
    href="skin-common.css" />

next, the named alternate stylesheets. note that the ‘red’ stylesheet is the default stylesheet, and the ‘green’ and ‘blue’ stylesheets are its alternates. only one of these stylesheets will be active at a time.

  <link rel="stylesheet" type="text/css" media="screen"
    title="red" href="skin-red.css" />
  <link rel="alternate stylesheet" type="text/css" media="screen"
    title="green" href="skin-green.css" />
  <link rel="alternate stylesheet" type="text/css" media="screen"
    title="blue" href="skin-blue.css" />

finally, we include the prototype javascript library (which our library uses) and our skin.js library. the skin.js library includes all of the functions we’ve developed, and also invokes init_skin().

  <script type="text/javascript" src="scriptaculous/prototype.js"></script>
  <script type="text/javascript" src="skin.js"></script>

we can also provide a menu of available skins somewhere in the body of the page. each item is a link which invokes set_skin() with the appropriate skin title. for example…

  <a href="javascript:set_skin('red');">red</a>

you can see this example in action, or download an archive of the example files.