title: HTML Class not working?
body: <p>I'm trying to change the text color in a <code>&lt;p&gt;</code> to gray. I thought doing something like <code>&lt;p class="gray"&gt;content&lt;/p&gt;</code> and <code>p.gray { color: #333333; }</code> would work but it's not doing anything. The color remains black. Help please?</p>
  
  <p><strong>EDIT TO INCLUDE ENTIRE CODE</strong></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html 
       PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;head&gt;
  
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;
  
  &lt;title&gt;TITLE&lt;/title&gt;
  
  &lt;link rel="stylesheet" type="text/css" href="c/main.css?90" /&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="wrapper"&gt;
    &lt;div id="divider"&gt;
    &lt;h1 class="logo5"&gt;NAME&lt;/h1&gt;
    &lt;ul class="underlinemenu"&gt;
      &lt;li&gt;&lt;a href="index.html"&gt;HOME&lt;/a&gt;&lt;/li&gt; 
      &lt;li&gt;&lt;a href="about.html"&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="subscribe.html"&gt;SUBSCRIBE&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="faq.html"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="contact.html"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="login.html"&gt;LOGIN&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/div&gt; &lt;!-- end divider --&gt;
  
    &lt;div id="divider"&gt;
    &lt;div class="article"&gt;
      &lt;h2 class="header"&gt;HEADER&lt;/h2&gt;
      &lt;div class="content"&gt;
        &lt;p class="gray"&gt;CONTENT&lt;/p&gt;
        &lt;p&gt;CONTENT&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt; &lt;!-- end divider --&gt;
  
    &lt;div id="divider"&gt;
    &lt;div class="article"&gt;
      &lt;h2 class="header"&gt;HEADER&lt;/h2&gt;
      &lt;div class="content"&gt;
        &lt;p&gt;CONTENT&lt;/p&gt;
        &lt;p&gt;CONTENT&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt; &lt;!-- end divider --&gt;
  
    &lt;div id="divider"&gt;
    &lt;div class="article"&gt;
      &lt;h2 class="header"&gt;HEADER&lt;/h2&gt;
      &lt;div class="content"&gt;
        &lt;p&gt;CONTENT&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt; &lt;!-- end divider --&gt;
  
    &lt;div id="footer"&gt;
      &lt;p class="copyright"&gt;COPYRIGHT&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt; &lt;!-- end wrapper --&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/*
      Name: Smashing HTML5
      Date: July 2009
      Description: Sample layout for HTML5 and CSS3 goodness.
      Version: 1.0
      Author: Enrique Ramírez
      Autor URI: http://enrique-ramirez.com
  */
  
  /* Imports */
  @import url("reset.css");
  @import url("global-forms.css");
  
  /***** Global *****/
  /* Body */
      body {
          background: #FFFFFF;
          color: #000305;
          font-size: 87.5%; /* Base font size: 14px */
          font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
          line-height: 1.429;
          margin: 0;
          padding: 0;
          text-align: left;
      }
  
  /* Headings */
  h2 {font-size: 1.571em} /* 22px */
  h3 {font-size: 1.429em} /* 20px */
  h4 {font-size: 1.286em} /* 18px */
  h5 {font-size: 1.143em} /* 16px */
  h6 {font-size: 1em} /* 14px */
  
  h2, h3, h4, h5, h6 {
      font-weight: 400;
      line-height: 1.1;
      margin-bottom: .8em;
  }
  
  /* Anchors */
  /*a {outline: 0;}
  a img {border: 0px; text-decoration: none;}
  a:link, a:visited {
      color: #C74350;
      padding: 0 1px;
      text-decoration: underline;
  }
  a:hover, a:active {
      background-color: #C74350;
      color: #fff;
      text-decoration: none;
      text-shadow: 1px 1px 1px #333;
  }*/
  
  /* Paragraphs */
  p {margin-bottom: 1.143em;}
  * p:last-child {margin-bottom: 0;}
  
  strong, b {font-weight: bold;}
  em, i {font-style: italic;}
  
  ::-moz-selection {background: #F6CF74; color: #fff;}
  ::selection {background: #F6CF74; color: #fff;}
  
  /* Lists */
  ul {
      list-style: outside disc;
      margin: 1em 0 1.5em 1.5em;
  }
  
  ol {
      list-style: outside decimal;
      margin: 1em 0 1.5em 1.5em;
  }
  
  dl {margin: 0 0 1.5em 0;}
  dt {font-weight: bold;}
  dd {margin-left: 1.5em;}
  
  /* Quotes */
  blockquote {font-style: italic;}
  cite {}
  
  q {}
  
  /* Tables */
  table {margin: .5em auto 1.5em auto; width: 98%;}
  
      /* Thead */
      thead th {padding: .5em .4em; text-align: left;}
      thead td {}
  
      /* Tbody */
      tbody td {padding: .5em .4em;}
      tbody th {}
  
      tbody .alt td {}
      tbody .alt th {}
  
      /* Tfoot */
      tfoot th {}
      tfoot td {}
  
  
  /* LAYOUT */
  /* ----------------------------------------- */
  
  div#wrapper {
      margin: 0 auto;
      width: 936px;
  }
  
  div#divider {
      border-bottom: 1px dotted #c5c5c5;
      margin: 0 0 10px 0;
      padding: 0 0 10px 0;
  }
  
  /*Credits: Dynamic Drive CSS Library */
  /*URL: http://www.dynamicdrive.com/style/ */
  
  .underlinemenu{
  font-family: Delicious;
  font-weight: bold;
  width: 100%;
  }
  
  ul.underlinemenu {
  padding: 6px 0 7px 0; /*6px should equal top padding of "ul li a" below, 7px should equal bottom padding + bottom border of "ul li a" below*/
  margin: 0;
  text-align: right; //set value to "left", "center", or "right"*/
  }
  
  ul.underlinemenu li{
  display: inline;
  }
  
  ul.underlinemenu li a{
  color: #FF0080;
  padding: 6px 3px 4px 3px; /*top padding is 6px, bottom padding is 4px*/
  margin-right: 20px; /*spacing between each menu link*/
  text-decoration: none;
  border-bottom: 1px dotted; /*bottom border is 3px*/
  }
  
  ul.underlinemenu li a:hover, ul.underlinemenu li a.selected{
  color: #009ee8;
  border-bottom-color: #009ee8;
  }
  
  p.copyright a{
  color: #FF0080;
  text-decoration: none;
  }
  
  p.copyright a:hover{
  color: #009ee8;
  }
  
  /* embedded fonts */
  
  @font-face {
  font-family: Delicious;
  src: url(fonts/Delicious-Heavy.otf)
  }
  
  .header {
  font-family: Delicious;
  }
  
  .logo5 {
  font-family: Delicious;
  }
  
  p.gray {
  color: #333333;
  }
  </code></pre>
  
  <p>I know it's a hacked up mess, sorry. I'm learning.</p>