CODEWITHSUNDEEP
htmlcss
Isaac
Isaac

Reputation: 416

The sequence of execution of CSS

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

Upvotes: 6

Views: 5435

Answers (3)

Adrift
Adrift

Reputation: 59859

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.

Upvotes: 6

dtech
dtech

Reputation: 14070

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

Upvotes: 11

Turnip
Turnip

Reputation: 36742

Your defaults must be declared before the media queries.

CSS is "executed" in order. You want the media queries to override the defaults in specific instances so you must declare them after.

Upvotes: 3

Related Questions