Is there a way to include custom CSS and JS in individual Wordpress posts? I'd like to start using Wordpress to make web development tutorials but I'm not sure how to properly add custom stylesheets or scripts. I've tried adding <style> and <script> tags into the text view of the post editor but it doesn't work correctly.

For my first tutorial I made a simple JS function that manipulated the CSS of some text. LOOK AT IT HERE

I'd like to import that same code into a Wordpress post and keep its functionality intact.

Here is the code that I used and would need to include in the post:

HTML Code:
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />

		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

		<title>Go Italian</title>
		<meta name="description" content="" />
		<meta name="author" content="Matthew Sanchez" />

		<meta name="viewport" content="width=device-width; initial-scale=1.0" />

	
	<style type="text/css">
	
	/* problem: absolute positioning is dependent on font-size */
	/* fixed: set absolute positioning using ems */
	
	
	/* template begin */
	
	body {
		font-size: 100%;
		color: #fff;
		background: #666;
	}
	
	#page {
		width: 50%;
		padding: 5%;
		margin: 15% auto 0;
		background: #aaa;
	}
	
	/* template end */
	
	.georgia {
		font-family: georgia;
		font-style: italic;
	}
	
	.impact {
		font-family: impact;
	}
	
	.courierNew {
		font-family: "courier new";
	}
	
	.verdana {
		font-family: verdana;
		font-weight: bold;
	}
	
	.arial {
		font-family: arial;
	}
	
	p {
		position: relative;
		font-size: 1.875em;   /* 30px/16 */
	}
	
	span {
		position: absolute;
	}
	
	#g {
		left: 0em;
	}
	
	#o {
		left: .64em;
	}
	
	#italian {
		position: relative;
		left: 1.7em;  /* ~50px */
	}

		
		
</style>
</head>


<body>
	
	<div id="page">
	
	<p><span id="g" class="impact">g</span><span id="o" class="arial">o</span> <span id="italian">Italian</span></p>
	<p>
		<button id="on" type="button" value="turn on">turn on</button>
		<button id="off" type="button" value="turn off">turn off</button>
	</p>
	</div>
	
	<script type="text/javascript" src="javascript/go-italian.js"></script>
	
</body>

</html>
JAVASCRIPT:

Code:
// grab elements
	var g = document.getElementById("g");
	var o = document.getElementById("o");
	var on = document.getElementById("on");
	var off = document.getElementById("off");
	
	// put classes (not font-families) in an array
	var gClasses = ["verdana", "georgia", "courierNew","arial", "impact"];
	var oClasses = ["courierNew", "impact", "verdana", "georgia", "arial"];
	var i = 0, t = 0;
	
	// iterate through 'classes' array every time called
	var gChange = function() {
		g.className = gClasses[i];
		i++;
		if( i == gClasses.length) {
			i = 0;
		}
	};
	
	var oChange = function() {
			o.className = oClasses[t];
			t++;
			if( t == oClasses.length) {
				t = 0;
			}  
	};
	
	// "r" is used to prevent multiple function calls when clicked multiple times
	var r;
	
	// "used" 
	var cancel;
	
	// call fontChange() every .65 sec when clicked to change letter classes
	var fontChange = function() {
		gChange();
	    setTimeout(oChange, 200);
	   // Recursion
	    // fontChange() calls itself after a delay to create an interval
		cancel = setTimeout(fontChange, 700);
	};
	
	// whole function starts when button is clicked with mouse
	on.onclick = function() {
		if(r == 1) {
			return;
		} else {
			fontChange();
			r = 1;
		}
	};
	
	// seperate button can stop the function
	off.onclick = function() {
		clearTimeout(cancel);
		r = 0;
	};
Thanks for looking!