Order of inheritance for CSS?
Permalink
Does anyone know the order of inheritance for CSS?
I want to be able to hard-code styles into a block, but I also want these styles to be overwritten if they are defined in the theme CSS.
As far as I know, inline CSS or CSS on the page overwrites CSS which is included in the header. Is there any way to reverse this?
Thanks!
I want to be able to hard-code styles into a block, but I also want these styles to be overwritten if they are defined in the theme CSS.
As far as I know, inline CSS or CSS on the page overwrites CSS which is included in the header. Is there any way to reverse this?
Thanks!
There are lots of places on the web that explain how the cascade works. The following document is the official explanation and is actually (unexpectedly?) readable. Pay particular attention to sections 6.4 (the cascade) and in particular 6.4.3 (specificity).
So it seems like the only way to overwrite an inline style is to use the !important property.
Do you know if Concrete is designed so that a theme's CSS overwrites a block's CSS? Perhaps not :(
I want to set up some basic styles on the pagination in my block, but I don't want people to have to use a custom template if they want to style it for their theme ...
Do you know if Concrete is designed so that a theme's CSS overwrites a block's CSS? Perhaps not :(
I want to set up some basic styles on the pagination in my block, but I don't want people to have to use a custom template if they want to style it for their theme ...
I don't think there's a way to override the inheritance rules of CSS.
However, why not simply make one stylesheet that contains the defaults styles for your block, then allow the user to create another one that overrides those styles. This will work as long as the default one is loaded first (i.e. it's listed first in the <head>).
However, why not simply make one stylesheet that contains the defaults styles for your block, then allow the user to create another one that overrides those styles. This will work as long as the default one is loaded first (i.e. it's listed first in the <head>).
That's the tricky part. I'm trying to do this for an add-on that's listed on the Marketplace. I guess the key would be figuring out if there's a way that I can push my block's CSS to be before the theme's CSS, or if this happens by default.
Maybe I just need to try and set up a test case for this
Maybe I just need to try and set up a test case for this
Doesn't that depend on the order how stylesheets are included in your code. Block styles are the last ones, which would override more specified css definitions when using !important.
The link I was referring to earlier:
http://www.w3.org/TR/CSS21/cascade.html...
and the important part:
A selector's specificity is calculated as follows:
* count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
* count the number of ID attributes in the selector (= b)
* count the number of other attributes and pseudo-classes in the selector (= c)
* count the number of element names and pseudo-elements in the selector (= d)
Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.
Some examples:
* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
http://www.w3.org/TR/CSS21/cascade.html...
and the important part:
A selector's specificity is calculated as follows:
* count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
* count the number of ID attributes in the selector (= b)
* count the number of other attributes and pseudo-classes in the selector (= c)
* count the number of element names and pseudo-elements in the selector (= d)
Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.
Some examples:
* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
The order styles are included in only matters after the specificity.
