gistfile1.js

function change_style(val) {
	$('#stylesheet_link').attr('href', 'css/' + val + '.css');
	if ( val != 'blank' ) {
		var w3val = val.substr(0,1).toUpperCase() + val.substr(1);
		$('#css_link').attr('href', 'http://www.w3.org/StyleSheets/Core/' + w3val);
		$('#css_link').html('http://www.w3.org/StyleSheets/Core/' + w3val);
	} else {
		$('#css_link').attr('href', 'http://ericharrison.info/w3styles/css/' + val + '.css');
		$('#css_link').html('Unstyled');
	}
}
$(document).ready(function() {
	$('#styleselector').bind('change',function() {
		change_style($(this).val());
	});
});

gistfile2.html

<div id="styleselection"> 
	<label for="styleselector" style="font-weight: bold;">Style Selector: </label> 
	<select name="styleselector" id="styleselector"> 
		<option value="blank" selected="selected">No Style</option> 
		<option value="oldstyle">Old Style</option> 
		<option value="modernist">Modernist</option> 
		<option value="midnight">Midnight</option> 
		<option value="ultramarine">Ultra Marine</option> 
		<option value="swiss">Swiss</option> 
		<option value="chocolate">Chocolate</option> 
		<option value="traditional">Traditional</option> 
		<option value="steely">Steely</option> 
	</select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<a href="css/blank.css" id="css_link">Unstyled</a> 
	<br /> 
	<div class="warning">Disclaimer: I did not create these styles and own nothing on this page. These styles
	were graciously taken from the <a href="http://www.w3.org/StyleSheets/Core/">W3C Core Styles</a> page
	and the copyrights are owned by the W3C. I only created this page to provide a better switching mechanism
	to quickly switch between the styles.</div> 
</div> 
<div style="height:50px;margin:5px 0px;"></div>

gistfile3.css

#styleselection {
	position: absolute;
	top: 10px !important;
	left: 10px !important;
}