title: CSS can't change text color in a div class
body: <p>I have made a button using a div. I am trying to make the text white, however the styling is behaving strangely. </p>
  
  <p>Here is the CSS portion:</p>
  
  <pre><code>.button a
  {
      text-align:center;
      display:block;
      background-color: #FF0000;
      height:40px;
      line-height:40px;
      color:#FFFFFF;
      text-decoration:none;
  }
  
  .button  :hover
  {
      background-color: #000000;  
  }
  </code></pre>
  
  <p>The page can be viewed here: <a href="http://www.clccomputing.net/comf413/01/menu.html" rel="nofollow noreferrer">http://www.clccomputing.net/comf413/01/menu.html</a></p>
  
  <p>As you can see, the text on the button is not white. </p>
  
  <p>Strangely, if I add the types <code>a:link</code>, <code>a:visited</code> to the CSS, the header layout collapses and the style applies to the TripAdvisor widget in the right sidebar, like so:</p>
  
  <p><a href="http://i58.tinypic.com/2udwefd.jpg" rel="nofollow noreferrer">Image link</a></p>
  
  <p>HTML up to the button:</p>
  
  <pre><code>&lt;body&gt;
  
  &lt;div id="wrapper"&gt;
  
      &lt;header&gt;
              &lt;a href="index.html"&gt;&lt;img src="images/logo.png" alt="Red 16 Cafe logo"/&gt;&lt;/a&gt;
      &lt;/header&gt;
  
      &lt;nav&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="menu.html"&gt;Menu&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="specials.html"&gt;Specials&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="map.html"&gt;Map&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="reviews.html"&gt;Reviews&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  
  
      &lt;article&gt;
          &lt;div id="articletext"&gt;
              &lt;a name="top"&gt;&lt;h1&gt;Our Menu&lt;/h1&gt;&lt;/a&gt;
              &lt;br&gt;
              &lt;div class="button"&gt;
                  &lt;a href="Red16MenuFeb2014.pdf"&gt;Download .PDF for printing&lt;/a&gt;
              &lt;/div&gt;
  </code></pre>