diff --git a/dom_manipulation/button.html b/dom_manipulation/button.html
index 790c6e8..2359c54 100644
--- a/dom_manipulation/button.html
+++ b/dom_manipulation/button.html
@@ -1,16 +1,27 @@
 <!DOCTYPE html>
-<html>
-    <head><title>JavaScript Button Example</title></head>
+<html lang="en">
 
-    <body>
-    <button id='squeeze'>Squeeze me</button>
-    
-    <script>
-     let button = document.getElementById("squeeze");
-     function shout(){
-	     alert("... and I squeak");
-     }
-     button.addEventListener("click", shout);
-    </script>
-    </body>
-</html>
+<head>
+	<title>JavaScript Button Example</title>
+</head>
+
+<body>
+	<div id="buttons">
+		<button id="original">I have friends</button>
+	</div>
+
+	<script>
+		function duplicate()
+		{
+			var newButton = document.createElement("button")
+			newButton.innerHTML = "Hello!"
+			document.getElementById("buttons").appendChild(newButton)
+		}
+
+		// Add listener to original button
+		let button = document.getElementById("original");
+		button.addEventListener("click", duplicate);
+	</script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/html_css/style.css b/html_css/style.css
new file mode 100644
index 0000000..7f0116b
--- /dev/null
+++ b/html_css/style.css
@@ -0,0 +1,47 @@
+html
+{
+	font-family: Helvetica, Arial, sans-serif;
+	font-size: 10px;
+}
+
+h2
+{
+	font-size: 2rem;
+}
+
+ul,ol,dl,p
+{
+	font-size: 1.5rem;
+}
+
+li, p {
+	line-height: 1.5;
+}
+
+/* Unordered list styles */
+ul {
+	padding-left: 2rem;
+	list-style-type: none;
+}
+
+ul li
+{
+	padding-left: 2rem;
+}
+
+/* Ordered list styles */
+ol
+{
+	list-style-type: upper-roman;
+}
+
+/* Description list styles */
+dd, dt
+{
+	line-height: 1.5;
+}
+
+dt
+{
+	font-weight: bold;
+}
\ No newline at end of file
diff --git a/html_css/styling-lists.html b/html_css/styling-lists.html
index 5efcc09..c481d4b 100644
--- a/html_css/styling-lists.html
+++ b/html_css/styling-lists.html
@@ -4,58 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width">
     <title>Styling lists</title>
-    <style>
-      /* General styles */
-
-      html {
-        font-family: Helvetica, Arial, sans-serif;
-        font-size: 10px;
-      }
-
-      h2 {
-        font-size: 2rem;
-      }
-
-      ul,ol,dl,p {
-        font-size: 1.5rem;
-      }
-
-      li, p {
-        line-height: 1.5;
-      }
-
-      /* Unordered list styles */
-
-      ul {
-        padding-left: 2rem;
-        list-style-type: none;
-      }
-
-      ul li {
-        padding-left: 2rem;
-        background-image: url(star.svg);
-        background-position: 0 0;
-        background-size: 1.6rem 1.6rem;
-        background-repeat: no-repeat;
-      }
-
-      /* Ordered list styles */
-
-      ol {
-        list-style-type: upper-roman;
-      }
-
-      /* Description list styles */
-
-      dd, dt {
-        line-height: 1.5;
-      }
-
-      dt {
-        font-weight: bold;
-      }
-
-    </style>
+    <link rel="stylesheet" href="style.css">
   </head>
   <body>
     <h2>Shopping (unordered) list</h2>
@@ -94,7 +43,5 @@ <h2>Ingredient description list</h2>
       <dt>Green salad</dt>
       <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
     </dl>
-
-
   </body>
 </html>
\ No newline at end of file
