Kind of a classic little trick for ya'll today. You know the <style> blocks you can put in the <head> of your HTML to do styling? You don't actually have to put those in your head, they can be anywhere on the page. It's not valid (or good practice) but it works.
What's more? It's just an element like any other. The default stylesheet of all browers makes it display: none;.
If you move it down into the body and reset it to display: block; you can see the very code which is applying style to that page. Might as well make it look nice and code-y to eh?
body style {
display: block;
background: #333;
color: white;
font: 13px/1.8 Monaco, Mono-Space;
padding: 20px;
white-space: pre;
}What's more? You can give it the HTML5 attribute of contenteditable and you can literally edit the CSS right there and watch it effect the page.
<style contenteditable>body {
background: green;
}</style>
That's how all the code on The Shapes of CSS page is done. Not only is it just kinda neat, but it's very useful on a page like that so you don't have to maintain the CSS in two places.