title: can I apply IDs more than once in CSS?
body: <p>This is a beginner's question, but I need to clarify it.
  Yes according to most of the tutorials it cannot be applied more than once.</p>
  
  <p><strong>ID's are unique <br />
      Each element can have only one ID <br />
      Each page can have only one element with that ID</strong><br />
  Reference 
  <a href="http://css-tricks.com/the-difference-between-id-and-class/" rel="nofollow">http://css-tricks.com/the-difference-between-id-and-class/</a></p>
  
  <p>But I wrote a simple mark-up in HTML and applied some CSS.</p>
  
  <p>Here is my code</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;ID vs Classes&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="ID &amp; Classes.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1 id="forh1"&gt;This is a h1 header&lt;/h1&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt;
  
      &lt;h1 id="forh1"&gt;This is a h1 header&lt;/h1&gt;
  
      &lt;p&gt;Curabitur sodales ligula&lt;/p&gt;
  
      &lt;h2 id="forh1"&gt;This is a h2 header&lt;/h2&gt; 
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#forh1{
  text-align:center;
  
  
  }
  </code></pre>
  
  <p>I have applied the same ID more than once (3 times). Two times in h1 header and one time in h2 header. When I run it in browser (chrome &amp; firefox) they worked perfectly. All text in h1 and h2 headers were aligned center. Why is that ?  Have not I grasped ID concept properly or is it an issue with the browser? Because I have heard modern browsers are smart enough to understand most of the implicit things. Please help.</p>