The sequence of execution of CSS

Question

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 :

/* 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;
   }

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).

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.

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.

Isaac

Answer 1

Later statements override earlier ones, so you'll have to go general to specific.

/* General CSS here */

/* CSS for min-width 800 here, overides general */

/* CSS for min-width 1024 here, overides both general and 800 */

Answer 2

CSS is parsed from top to bottom, so if two selectors are of equal specificity and match the same element, the latter in the stylesheet will win.