title: Order of precedence of CSS rules
body: <p>If more than one CSS rule applies to an <em>element</em> and specifies the same property, 
  then CSS gives priority to the rule that has the more specific selector. </p>
  
  <p>That means,
  An ID selector is more specific than a class selector, which in turn is more 
  specific than a tag selector, as shown below,</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#id1 {
    color: blue;
  }
  .class1 {
    color: red;
  }
  p {
    color: green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p class="class1" id="id1"&gt;Sham&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>the output is a paragraph text in <code>blue</code> color.</p>
  
  <p>For the below code,</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>p[data-colour] {
    color: yellow;
  }
  #id1 {
    color: blue;
  }
  .class1 {
    color: red;
  }
  p {
    color: green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p class="class1" id="id1" data-colour&gt;Sham&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>With respect to <em>attribute selectors</em>, What does CSS rule specificity say?</p>