diff --git a/index.html b/index.html
index 1654a2e29..444528482 100644
--- a/index.html
+++ b/index.html
@@ -3,25 +3,26 @@
 
   <head><!-- where all the meta data will go, like and files we need to include -->
     <title>My Little Rainbow</title><!-- the title is what appears on your tab -->
+    <link rel="stylesheet" type="text/css" href="./main.css" />
   </head>
 
   <body><!-- the body element is where everything we will see on the page will go -->
 
     <!-- our soon to be beautiful rainbow! -->
-    <div> <!-- the grandest grandparent div -->
-      <div>
-        <div>
-          <div>
-            <div>
-              <div>
-                <div></div> <!-- the grandest child div -->
+    <div id="red">
+      <div id="orange">
+        <div id="yellow">
+          <div id="green">
+            <div id="blue">
+              <div id="indigo">
+                <div id="violet">
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-
+    </div>
   </body>
 
 </html>
diff --git a/main.css b/main.css
index 984a9b226..acd300d60 100644
--- a/main.css
+++ b/main.css
@@ -9,3 +9,24 @@ div {
   border-right-color: transparent; /* the right side */
   border-bottom-color: transparent; /* and the bottom of the circle */
 }
+#red {
+  border-top-color: #f00;
+}
+#orange {
+  border-top-color: #ffa500;
+}
+#yellow {
+  border-top-color: #ff0;
+}
+#green {
+  border-top-color: #00bc3f;
+}
+#blue {
+  border-top-color: #06f;
+}
+#indigo {
+  border-top-color: #8a2be2;
+}
+#violet {
+  border-top-color: #d300c9;
+}
\ No newline at end of file
