diff --git a/css/styles.css b/css/styles.css
index ae382b4..e0a1163 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1,3 +1,16 @@
+body {
+  color: rgb(66,66,66);
+}
+h1,h2,h3,h4,h5,h6 {
+  color: rgb(44,44,44);
+}
+a {
+  color: rgb(42,93,173);
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
 blockquote {
   padding-left: 16.875px;
   border-left: 6px solid lightgray;
diff --git a/html.js b/html.js
index f43e182..1c7af69 100644
--- a/html.js
+++ b/html.js
@@ -11,6 +11,11 @@ export default class Html extends React.Component {
       title = this.props.title
     }
 
+    let cssLink
+    if (process.env.NODE_ENV === 'production') {
+      cssLink = <link rel="stylesheet" href={link('/styles.css')} />
+    }
+
     return (
       <html lang="en">
         <head>
@@ -21,28 +26,9 @@ export default class Html extends React.Component {
             content="user-scalable=no width=device-width, initial-scale=1.0 maximum-scale=1.0"
           />
           <title>{this.props.title}</title>
-          <link rel="shortcut icon" href={favicon}/>
+          <link rel="shortcut icon" href={favicon} />
           <TypographyStyle/>
-          <style
-            dangerouslySetInnerHTML={{
-              __html:
-                `
-                  body {
-                    color: rgb(66,66,66);
-                  }
-                  h1,h2,h3,h4,h5,h6 {
-                    color: rgb(44,44,44);
-                  }
-                  a {
-                    color: rgb(42,93,173);
-                    text-decoration: none;
-                  }
-                  a:hover {
-                    text-decoration: underline;
-                  }
-                `,
-            }}
-          />
+          {cssLink}
         </head>
         <body className="landing-page">
           <div id="react-mount" dangerouslySetInnerHTML={{ __html: body }} />
