mikechambers/default.css

## default.css
.test {
	color:#FF0000;
}

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />

	<title>TITLE</title>

	<link rel="stylesheet" href="default.css">
	<script src="jquery.js"></script>
	<script src="main.js"></script>
</head>
<body>

<div class="test">Hi!</div>

<div><a href="#" id="toggle_div">Toggle Style Sheets</a></div>

</body>
</html>

## main.js
$(document).ready(function() {
	$("#toggle_div").click(
		function(event){

			if(document.getElementById("new_css")){
				$("#new_css").remove();
			}
			else{

				$("head").append("<link id=\"new_css\" />");
				$("#new_css").attr({
						"rel": "stylesheet",
						"type": "text/css",
						"href": "new.css"
					}
				);
			}
		}
	);


});

## new.css
.test {
	color:#00FF00;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />

	<title>TITLE</title>

	<link rel="stylesheet" href="default.css">
	<script src="jquery.js"></script>
	<script src="main.js"></script>
	</head>
	<body>

	<div class="test">Hi!</div>

	<div><a href="#" id="toggle_div">Toggle Style Sheets</a></div>

	</body>
	</html>
	$(document).ready(function() {
	$("#toggle_div").click(
	function(event){

	if(document.getElementById("new_css")){
	$("#new_css").remove();
	}
	else{

	$("head").append("<link id=\"new_css\" />");
	$("#new_css").attr({
	"rel": "stylesheet",
	"type": "text/css",
	"href": "new.css"
	}
	);
	}
	}
	);


	});