diff --git a/css/styles.css b/css/styles.css
new file mode 100644
index 0000000..1b89986
--- /dev/null
+++ b/css/styles.css
@@ -0,0 +1,18 @@
+iframe{
+  width:100%;
+  height:50%;
+  background-color: #ffffff;
+  border: 1px solid #000000;
+}
+
+body{
+  margin:1px;
+  background-color: #999999;
+}
+
+textarea{
+  width: 33.105%;
+  height: 50%;
+  font-size:18;
+  border: 1px solid #000000;
+}
diff --git a/index.html b/index.html
index 7c6b509..f9599b2 100644
--- a/index.html
+++ b/index.html
@@ -1,12 +1,11 @@
-<body 
-    oninput="i.srcdoc=h.value+'<style>'+c.value+
-            '</style><script>'+j.value+'<\/script>'">
-    <style>
-        textarea,iframe{width:100%;height:50%}
-        body{margin:0}
-        textarea{width:33.33%;font-size:18}
-    </style>
-    <textarea placeholder=HTML id=h></textarea>
-    <textarea placeholder=CSS id=c></textarea>
-    <textarea placeholder=JS id=j></textarea>
-    <iframe id=i>
\ No newline at end of file
+<html>
+  <head>
+    <link rel="stylesheet" href="css/styles.css">
+  </head>
+  <body oninput=" i.srcdoc = h.value + '<style>' + c.value + '</style><script>' + j.value + '<\/script>' ">
+    <textarea placeholder= "HTML" id="h"></textarea>
+    <textarea placeholder="CSS" id="c"></textarea>
+    <textarea placeholder="JS" id=j></textarea>
+    <iframe id="i">
+  </body>
+</html>
