diff --git a/index.html b/index.html
index a79be88..8475353 100644
--- a/index.html
+++ b/index.html
@@ -16,10 +16,14 @@
 
     <!-- Create another <link> tag to import the styles.css file -->
     <!-- That file is where you will put your styles -->
+    
+    <!--This is the css from the styles.css file when the above two link stylesheets are commented-->
+    <link rel="stylesheet" href="./styles.css">
+
   </head>
   <body>
     <header>
-      <h1>CSS Selectors</h1>
+      <h1 id="top">CSS Selectors</h1>
       <h2>Playground</h2>
       <p>
         Follow the instructions on this page to practice using CSS selectors to
@@ -29,7 +33,7 @@ <h2>Playground</h2>
 
     <article id="selectors" class="exercises">
       <header>
-        <h1>Base CSS Selectors</h1>
+        <h1 id="middle">Base CSS Selectors</h1>
         <p>
           First we'll start off by using the base selectors to add styles to
           elements on the page. These base selectors have different levels of
diff --git a/styles.css b/styles.css
index 9c416ab..d729b57 100644
--- a/styles.css
+++ b/styles.css
@@ -1,2 +1,35 @@
 /* Move your styles here when you're ready to clean up your HTML file */
-/* Don't forget to link to this file in your HTML, otherwise your styles won't show up! */
\ No newline at end of file
+/* Don't forget to link to this file in your HTML, otherwise your styles won't show up! */
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+header{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: gray;
+}
+
+#top{
+    font-family: Georgia, 'Times New Roman', Times, serif;
+    font-weight: 900;
+    color: darkslateblue;
+}
+
+header h2{
+    font-weight: 100;
+    color: deepskyblue;
+}
+
+header p{
+    font-style: italic;
+}
+
+#middle{
+    font-weight: 300;
+    color: deepskyblue;
+}
\ No newline at end of file
