diff --git a/index.html b/index.html
index 1654a2e29..92eef9e0b 100644
--- a/index.html
+++ b/index.html
@@ -3,18 +3,19 @@
 
   <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"> <!-- the grandest grandparent div -->
+      <div id="orange">
+        <div id="yellow">
+          <div id="green">
+            <div id="blue">
+              <div id="indigo">
+                <div id="violet"></div> <!-- the grandest child div -->
               </div>
             </div>
           </div>
diff --git a/main.css b/main.css
index 984a9b226..53f1c2d37 100644
--- a/main.css
+++ b/main.css
@@ -9,3 +9,33 @@ 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;
+}
+
+  
