title: Priority among conflicting attributes
body: <p>How is the priority determined when conflicting attributes are specified directly or through css?</p>
  
  <p>In this example, the <code>display : none</code> specified through css seems to be overriding the <code>display : inline-block</code> that is directly specified for <code>id=1</code>, so that element becomes visible.</p>
  
  <pre><code>&lt;style&gt;
  .invisible{
      display : none
  }​​
  &lt;/style&gt;
  &lt;div id=1 class="invisible" style="display:inline-block"&gt;Hello World&lt;/div&gt;
  </code></pre>
  
  <p>In the following example, where I have two conflicting class specifications,</p>
  
  <pre><code>&lt;style&gt;
  .invisible{
      display : none
  }​​
  .visible{
      display : inline-block
  }​​
  &lt;/style&gt;
  &lt;div id=1 class="visible invisible"&gt;Hello World&lt;/div&gt;
  </code></pre>
  
  <p>the  <code>display : inline-block</code> specified through <code>.visible</code> class seems to be overriding <code>display : none</code> specified through <code>.invisible</code> class.</p>
  
  <p>What are the rules that determine the priority in these cases?</p>