@doubleT said in Modifying Stylesheet (Weathermap, News feed & Temperature):
For css, it’s relevant when something is loaded. If an identifier with a style is mentioned two times in a file, the second one overwrites the first one. And custom.css is loaded after main.css, so styles there override main.css.
Not quite accurate, and this can lead to some confusion. The second rule will take precedence over the first if they are equally specific, or if the second rule is more specific that the first. A more specific rule will always take precedence over a less specific rule, not matter what order they appear to the system.
Here are some examples:
.module-content {
width: 150px;
}
...
.module-content {
width: 300px;
}
/*
exactly the same specificity, 2nd rule takes precedence,
and anything with the class .module-content will be
sized to 300px wide
*/
Another example:
.region.top.left .module-content {
width: 150px;
}
...
.module-content {
width: 300px;
}
/*
First rule is more specific. Any element with the class .module-content
within an element with the classes .region.top.left will be sized to
150px wide. Any other element with the class .module-content
will be sized to 300px.
for example, here is some markup:
< div class="region top right" >
< div class="module-content" >
This will be sized to 300px
< /div>
< /div>
< div class="region top left" >
< div class="module-content" >
This will be sized to 150px
< /div>
< /div>
*/
Lastly, any rule with the !important flag will take precedence regardless of specificity.
Example:
.region.top.left .module-content {
width: 150px;
}
...
.module-content {
width: 300px !important;
}
/*
Any element with the class .module-content will be
sized to 300px. The !important flag takes precedence
over the more specific rule above it.
*/
Try not to never use the !important flag. This makes it much harder to override your rule later if you decide you need to. Instead, if you are finding that your rule is not taking effect, it is most likely due to a more specific rule taking precedence. The real solution is to write a more specific rule to make yours take precedence.
