How do I turn the following HTML code to an internal stylesheet?

index.html

Homer Simpson

Education

1. School of Hard Knocks
   • Bachelor of Science in Everything
2. Santa Monica College
   • Associate of Science in Web Programming
   • AA in Rock Music Appreciation
3. University of California at Los Angeles

Worldy Experience

• Springfield Nucular Power Plant- not sure what I'm suppose to do
• Springfield Donut Barn master taster. I like the ones with the pink icing
• Springfield Pork Rind Factory- senior taster
• Duff Beer Brewery- taster trainee; supervisor- Jos Antonio Gonzlez

Other Skills

Xhtml, HTML5

The following data will be posted to my server at homerswebsight.com

Username :
"I think, therefore I drink." - Homerism #73. Or, supply your own wisdom here, if you dont think you're so smart.
How much do you like me ?: not so muchYou are OKnot so much

(c) 2012 Homer Simpson Kingdom & Universe, Inc

TOP

Styles.css

*{ /* Universal reset: */ }

header,footer, article,section, hgroup,nav, figure{ /* Giving a display value to the HTML5 rendered elements: */ display:block; }

body{ /* Setting the default text color, size, page background and a font stack: */ font-size:0.825em; background-color:#ABD9E5; font-family:Arial, Helvetica, sans-serif; }

/* Hyperlink Styles: */

a, a:visited { color:#0196e3; text-decoration:none; outline:none; }

a:hover{ text-decoration:underline; }

a img{ border:none; }

/* Headings: */

h1{ /* The logo text */ font-size:3.5em; padding:0.5em 0 0; text-transform:uppercase; }

h3{ color: black; font-size: 18px; }

h2{ font-size:2.2em; font-weight:normal; letter-spacing:0.01em; text-transform:uppercase; text-align: center; background-color: #FFC1CC; margin-top: 18px; }

p{ line-height:1.5em; padding-bottom:1em; }

.line{ /* The dividing line: */ }

article .line{ /* The dividing line inside of the article is darker: */ background-color:#15242a; border-bottom-color:#204656; margin:1.3em 0; }

footer .line{ margin:2em 0; }

nav{ background:url(img/gradient_light.jpg) repeat-x 50% 50% #f8f8f8; padding:0 5px; position:absolute; right:0; top:4em; border:1px solid #FCFCFC;

-moz-box-shadow:0 1px 1px #333333; -webkit-box-shadow:0 1px 1px #333333; box-shadow:0 1px 1px #333333; }

/* The clearfix hack to clear the floats: */

.clear:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden; }

/* The navigation styling: */

nav ul li{ display:inline; }

nav ul li a, nav ul li a:visited{ color:#565656; display:block; float:left; font-size:1.25em; font-weight:bold; margin:5px 2px; padding:7px 10px 4px; text-shadow:0 1px 1px white; text-transform:uppercase; }

nav ul li a:hover{ text-decoration:none; background-color:#f0f0f0; }

/* Article styles: */

#page{ width:960px; margin:0 auto; position:relative; }

article{ /*background-color:#213E4A; margin:3em 0; padding:20px; text-shadow:0 2px 0 black;*/ }

figure{ float:right; height:150px; margin-right:80px; overflow:hidden; width:120px; }

figure:hover{ -moz-box-shadow:0 0 2px #4D7788; -webkit-box-shadow:0 0 2px #4D7788; box-shadow:0 0 2px #4D7788; }

/*figure img{ margin-left:-60px; }*/

/* Footer styling: */ .last-div{float:left; width:100%;padding: 5px; background-color: #FFC1CC;} footer{ margin-bottom:30px; font-size:0.825em; }

footer p{ margin-bottom:-2.5em; position:relative; }

footer a,footer a:visited{ display:block; padding:2px 4px; z-index:100; position:relative; }

footer a:hover{ text-decoration-line: underline; }

footer a.up{ float:left; }