CSS loading order

[bearry]

Does anyone know how to set the load order of css in miva 9?

[Brennan]

The order is determined by the order your CSS is called in via your global head tag. If you are using a ReadyTheme this order can be changed in the /themes/levels/css/all.php file (or css.php)

[Kent Multer]

Just for my own curiosity, why is the load order important? Is there some kind of conflict or side effect that can occur?

Thanks --

[alphabet]

The last CSS rule will override any previous rule.

.someclass {color:black;}
.someclass {color: red;}

<p class="someclass"> text </p>

someclass will display as color red.

Any inline stlye will override an imported style sheet.

<p class="someclass" style="color:blue;"> text </p>

will display as blue

Any !important will override all.

<p class="someclass" style="color:purple !important" style="color:blue"> text </p>

will display as purple

[cnelson]

Alphabet, if you use the Style Resources tab under User Interface there is no way I have found to order that list of CSS files.

The best way to add styles to your head tag is to hard code them in the HEAD Tag Content box.

[Bruce - PhosphorMedia]

And just to be clear:

IF YOU HAVE

.colorMe { color:red }

in myStyle.css

and

.colorMe { color:blue }

in otherStyles.css

and you call them in this order:

myStyle.css
otherStyles.css

then

<p class="colorMe">Hi!</p>

is blue

while,

otherStyles.css
myStyle.css

is red.


This is why the best way to managed style changes is to load your OWN stylesheet last, and copy any styles you need to modify in the built in styles sheets into your own stylesheet and make the changes there. So, when built in styles are changed, you just copy over the updated styles sheets. And unless you are doing something really different like change the structure of those styles (which you actually shouldn't), then you are done updating.