title: Inline style for DIV allows border, but not CSS
body: <p>There's obviously something fundamental I don't understand about styling so please help me out.</p>
  
  <p>Let's take the following simple HTML :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;div&gt;
      &lt;div style="border: 1px solid black;"&gt;
          Hi!
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>So I have a DIV inside of a DIV and you can see a nice border around it. All is well. Now, let's remove the inline style and put it inside a CSS file.</p>
  
  <p>HTML :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" href="test.css" /&gt;
  &lt;/head&gt;
  &lt;div&gt;
      &lt;div class="test"&gt;
          Hi!
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS :</p>
  
  <pre><code>.test {
      border: 1px solid black;
  }
  </code></pre>
  
  <p>No border appears now. I've tested this on both Chrome and Firefox so I don't think this is browser-specific behavior. There's certainly a good reason why there's no border in the second case but I can't seem to find it. Why is this and how do I fix it in my CSS?</p>