title: Browsers not recognizing styling for my paragraph tags
body: <p>For whatever reason cannot get my browser or editor to recognize the styling that I have set for my paragraph tags. Here is my code. Any help is much appreciated :)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* COLORS */
  $color1: #000000;
  $color2: #111111;
  $color3: #222222;
  $color4: #333333;
  $color5: #444444;
  $color6: #555555;
  
  /* BODY TEXT */
  p {
      font-family: 'Open Sans', sans-serif;
      font-weight: 300;
      font-size: 16px;
      line-height: 26px;
      color: #ffffff;
  }
  
  /* H1-H6 */
  h1 {
      font-size: 60px;
      font-family: 'Open Sans', sans-serif;
      font-weight: 700;
      color: #000;
      letter-spacing: 0px;
  }
  h2 {
      font-size: 50px;
      font-family: 'Open Sans', sans-serif;
      font-weight: 700;
      color: #000;
      letter-spacing: 0px;
  }
  h3 {
      font-size: 40px;
      font-family: 'Open Sans', sans-serif;
      font-weight: 500;
      color: #000;
      letter-spacing: 0px;
  }
  h4 {
      font-size: 30px;
      font-family: 'Open Sans', sans-serif;
      font-weight: 300;
      color: #000;
      letter-spacing: 0px;
  }
  h5 {
      font-size: 20px;
      font-family: 'Open Sans', sans-serif;
      font-weight: 100;
      color: #000;
      letter-spacing: 0px;
  }
  h6 {
      font-size: 10px;
      font-family: 'Open Sans', sans-serif;
      font-weight: 100;
      color: #000;
      letter-spacing: 0px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet"&gt;
  &lt;link href="styleguide_sample.css" rel="stylesheet" type="text/css" &gt;
  &lt;title&gt;Title of project goes here&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;p&gt;
   &lt;strong&gt;This is body text:&lt;/strong&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id malesuada felis. Sed efficitur scelerisque tortor, a ultricies tortor vestibulum non. Proin id nisi condimentum, ultrices tellus id, vehicula massa. Ut laoreet, purus at malesuada ornare, orci dui mattis elit, fermentum mollis dolor quam ut orci. Morbi consequat non nibh eget aliquam. Donec diam velit, volutpat ut ornare in, ultricies ac est. Aenean a ligula auctor, congue elit nec, fringilla eros. Mauris placerat ligula id neque fringilla, ut congue quam pellentesque. Aenean lacinia, velit ut fringilla tincidunt, tortor nisi faucibus quam, sed lobortis justo ex ac ipsum. Etiam et dolor eget metus ultrices tincidunt non ac erat. Integer non accumsan mi, sed consequat purus.  
   &lt;/p&gt;
   &lt;h1&gt;
   This is Header 1
   &lt;/h1&gt;
   &lt;h2&gt;
   This is Header 2
   &lt;/h2&gt;
   &lt;h3&gt;
   This is Header 3
   &lt;/h3&gt;
   &lt;h4&gt;
   This is Header 4
   &lt;/h4&gt;
   &lt;h5&gt;
   This is Header 5
   &lt;/h5&gt;
   &lt;h6&gt;
   This is Header 6
   &lt;/h6&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have tested this is firefox &amp; chrome, the only place it seems to be working is Dreamweaver. Im sure there is a simple solution. I just can't seem to identify what it is. </p>
  
  <p>ps: The H1 - H6 tags seem to be working fine. The only thing that won't work is the styling for the P tag.</p>