title: The sequence of execution of CSS
body: <p>I am so curious to know the sequence of execution of statements in the CSS file. I have the following CSS in the CSS file :</p>
  
  <pre><code>/* screen width larger than 800px */
  @media screen (min-width: 800px) {
       .indexphototd {
              width:200px !important;
          }
       .indexphoto {
           width:200px !important;
        }
  }
  
  /* screen width larger than 1200px */
  @media screen (min-width: 1200px) {
       .indexphototd { 
              width:300px !important;
          }
       .indexphoto {
           width:300px !important;
        }
  }
  
  
  /* default setting */
  .indexphototd { 
      width:500px !important;
     }
  .indexphoto {
      width:500px !important;
     }
  </code></pre>
  
  <p>In the code above I have declared 2 types of settings of 2 classes in 2 different screen sizes, and AFTER that I have mentioned 2 statements without the restriction on the screen sizes (that is, default).</p>
  
  <p>My objective is, the screen size does not fall into those 2 groups above, it has to take the default  value set in the 3rd one below. </p>
  
  <p>But I am wondering if the default settings would override the screen-size specific settings since I have inserted the default setting at the very end. Do I have to put it at the beginning? Could you please let me know the sequence of execution in the CSS. I know CSS is not a programming language. I am new to web development and learning all these minute stuff. Please help me. Thanks.</p>
  
  <p>Isaac</p>