title: Styling a button from a separate css file
body: <p>i'd like to style buttons in some html code that is linked to a css file. The style for the buttons is in the css file.</p>
  
  <p>Everything else works, but when I try to get the styled button, it turns into a normal html button unless the style is defined in the html file.</p>
  
  <p>The HTML file:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="/static/css/main.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;input type='button' id='button' class="button" value='Button' onclick='AddOne()'&gt;
      (function defined here, works correctly)
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The stylesheet:</p>
  
  <pre><code>.button {
      background-color: #CCCCCC;
      border: none;
      color: white;
      padding: 15px 25px;
      text-align: center;
      font-size: 16px;
      cursor: pointer;
  }
  
  .button:hover {
    background-color: #535362;
  }
  </code></pre>
  
  <p>If I add the style with the style tag in the html file itself, it works. But I don't want to paste a block of style code into the file every time I need a button, else why bother with css altogether?</p>