I have several stylesheets. The first one is a stylesheet with some styles that I would like to use as defaults. Depending on several factors, the code being used to generate the page may include some stylesheets with values that should override the defaults.
If I use this, can I trust that the values in the default stylesheet will be overridden by the values from the other stylesheet? I am using class selectors and will override values when the names match.
<link href="defaults.css" rel="stylesheet" type="text/css"/>
<link href="valuestooverridedefaults.css" rel="stylesheet" type="text/css"/>
This needs to work on all browsers, including mobile. I'd like to avoid having to use "!important", if possible.
Thanks!
There is a defined cascade in which the styles are sorted and applied. When declarations have the same importance (weight), origin and specificity then the latter declaration wins. Most answers cover importance and specificity here but not origin.
Here are some very good slides about CSS Cascades. (Overview all resources)