diff --git a/index.html b/index.html
index 7b65980..629bda3 100644
--- a/index.html
+++ b/index.html
@@ -1,59 +1,62 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="styles.css" />
     <title>CSS Selector Fun</title>
-</head>
-<body>
-    
-    <p>Make this text orange and 28px</p>
-    <p>Make this text orange and 28px</p>
-    <p>Make this text orange and 28px</p>
+  </head>
+  <body>
+    <p class="orange-color">Make this text orange and 28px</p>
+    <p class="orange-color">Make this text orange and 28px</p>
+    <p class="orange-color">Make this text orange and 28px</p>
 
     <p class="paragraph">Make this text green and 28px</p>
     <p id="paragraph">Make this text red and 28px</p>
 
     <!-- How can we avoid repeating rule definitions for each heading type?-->
-    <h1>Make this heading pink</h1>
-    <h2>Make this heading pink</h2>
-    <h3>Make this heading pink</h3>
-    <h4>Make this heading pink</h4>
+    <h1 class="pink-color">Make this heading pink</h1>
+    <h2 class="pink-color">Make this heading pink</h2>
+    <h3 class="pink-color">Make this heading pink</h3>
+    <h4 class="pink-color">Make this heading pink</h4>
 
     <!-- The nested paragraphs in these div's contain some common styling,
         but also some slightly different styles. Is there a way we can avoid
         repeating the common styles in the stylesheet? -->
     <div class="container-one">
-        This text should stay black and 28px
-        <p>
-            Make this text <span>blue</span> and 12px. Make this paragraph have 10px left margin and a black 2px bottom border.
-        </p>
+      This text should stay black and 28px
+      <p>
+        Make this text <span>blue</span> and 12px. Make this paragraph have 10px
+        left margin and a black 2px bottom border.
+      </p>
     </div>
 
     <div class="container-two">
-        <span>This text should stay black and 28px.</span>
-        <p>
-            Make this text purple and 15px. Make this paragraph have 10px left margin and a black 1px bottom border.
-            <!-- We don't want to change all spans - just this one. How
+      <span>This text should stay black and 28px.</span>
+      <p>
+        Make this text purple and 15px. Make this paragraph have 10px left
+        margin and a black 1px bottom border.
+        <!-- We don't want to change all spans - just this one. How
                 can you use CSS to select this specific span, without modifying 
                 the HTML file? -->
-            <span>Make this text 12px and grey.</span>
-        </p>
+        <span>Make this text 12px and grey.</span>
+      </p>
     </div>
 
     <!-- Is there a way to define a CSS selector that matches
         elements that have multiple classes only? -->
     <div class="container-one container-two">
-        <p>This text should be purple, 10px, all capitals and bold. Make this paragraph have 10px left margin and black 1px bottom border.</p>
+      <p>
+        This text should be purple, 10px, all capitals and bold. Make this
+        paragraph have 10px left margin and black 1px bottom border.
+      </p>
     </div>
 
     <!-- How do you stop this element getting the styles from 
         the above elements? -->
     <section class="container-one container-two">
-        <p>Make this <span>text orange and 28px.</span></p>
+      <p>Make this <span>text orange and 28px.</span></p>
     </section>
-
-</body>
+  </body>
 </html>
diff --git a/styles.css b/styles.css
index e69de29..6d7c195 100644
--- a/styles.css
+++ b/styles.css
@@ -0,0 +1,70 @@
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  margin-bottom: 30px;
+}
+
+p {
+  font-size: 28px;
+}
+
+.orange-color {
+  color: orange;
+}
+
+.paragraph {
+  color: green;
+}
+
+#paragraph {
+  color: red;
+}
+
+.pink-color {
+  color: pink;
+}
+
+.container-one,
+.container-two {
+  color: black;
+  font-size: 28px;
+}
+
+.container-one p {
+  color: blue;
+  font-size: 12px;
+  border-bottom: 2px solid black;
+}
+
+.container-two p {
+  color: purple;
+  font-size: 15px;
+  border-bottom: 1px solid black;
+}
+
+.container-one p,
+.container-two p,
+.container-one.container-two p {
+  margin-left: 10px;
+}
+
+.container-two p span {
+  color: gray;
+  font-size: 12px;
+}
+
+.container-one.container-two p {
+  color: purple;
+  font-size: 10px;
+  font-weight: bold;
+  text-transform: uppercase;
+  border-bottom: 1px sokid black;
+}
+
+section.container-one.container-two p,
+section.container-one.container-two span {
+  color: orange;
+  font-size: 28px;
+  font-weight: normal;
+}
