diff --git a/dom_manipulation/button.html b/dom_manipulation/button.html
index 790c6e8..d2267a1 100644
--- a/dom_manipulation/button.html
+++ b/dom_manipulation/button.html
@@ -1,16 +1,24 @@
 <!DOCTYPE html>
 <html>
-    <head><title>JavaScript Button Example</title></head>
 
-    <body>
+<head>
+    <title>JavaScript Button Example</title>
+</head>
+
+<body>
     <button id='squeeze'>Squeeze me</button>
-    
+
     <script>
-     let button = document.getElementById("squeeze");
-     function shout(){
-	     alert("... and I squeak");
-     }
-     button.addEventListener("click", shout);
+        let button = document.getElementById("squeeze");
+        function shout() {
+            let g = Math.floor(Math.random() * 255);
+            let b = Math.floor(Math.random() * 255);
+            let r = Math.floor(Math.random() * 255);
+            console.log(r, g, b);
+            document.body.style.setProperty("background-color", "rgb(" + r + ", " + g + ", " + b + ")");
+        }
+        button.addEventListener("click", shout);
     </script>
-    </body>
-</html>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/html_css/styles.css b/html_css/styles.css
new file mode 100644
index 0000000..579fbac
--- /dev/null
+++ b/html_css/styles.css
@@ -0,0 +1,54 @@
+/* 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;
+}
\ No newline at end of file
diff --git a/html_css/styling-lists.html b/html_css/styling-lists.html
index 5efcc09..d094e77 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="styles.css" />
   </head>
   <body>
     <h2>Shopping (unordered) list</h2>
