Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

The sequence of execution of CSS

Tags:

html

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

like image 474
Isaac Avatar asked May 14 '13 21:05

Isaac


People also ask

What is the order of CSS?

CSS rules always prioritize from left to right, then from top to bottom.

Which CSS is executed first?

Following is the order of precedence of how the styles get applied. Inline - Placed in the HTML element tag itself. Internal - Placed in the view page inside a <style> tag. External - Placed in the external style sheet (.

What is the order of precedence for CSS?

Inline styles. Internal (embedded) styles. External styles.


2 Answers

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 */
like image 176
dtech Avatar answered Sep 28 '22 07:09

dtech


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.

like image 31
Adrift Avatar answered Sep 28 '22 08:09

Adrift