And just to be complete - there is a 4th part of a specificity calculation. i.e. inline styles Given the following CSS: #sometable tr.odd td.foo a {/*declarations*/} AND HTML fagments: <tr class="odd"><td class="foo"><a href="#" style="color:blue"> The specificity calculation would be: 1-1-2-3 (inline-ids-classes/pseudoclasses-tags) This shouldn't apply to your themes because you shouldn't be using in-line styles - but you may sometimes want to add some in-line styles to content you are entering in a node. andre Steven Wittens wrote:
I added the removed style to Bluemarine's style.css as Bluemarine did not have a paragraph style of its own. A good rule is to check the core themes' CSS files for rules which override the removed rule. CSS overriding can get tricky (*), but for simple rules this should be easy.
Except for CSS magic like overflow, float/clear or stuff like that, a good rule of thumb is that if it works on either Firefox, Opera or Safari, it will most likely work on the other two. The big problem again is IE, feel free to ask me to do a quick IE spot-check if you want.
(*) To explain CSS rule overriding, it works like this. When multiple conflicting styles apply to an element, the specificity of each style is calculated, and only the style with the highest specificity applies. So a rule "td a:hover" does not mean that "a:hover" will be ignored completely: it simply means that /if/ both rules match on an element and apply conflicting styles (e.g. color: blue, color: red), the "td a:hover" styles will override "a:hover" styles for that element.
The specificity of a rule is calculated like this. Count the amount of id's, classes and tags that appear in it. Pseudo-classes like ":hover" are counted as classes. Put them together in that order and treat them like a number. Higher numbers override lower numbers.
For example "tr td.foo" has 0-1-2 (ids-classes-tags), "tr.bar td.foo" has 0-2-2. Thus the latter overrides the former. So e.g. 2-1-2 > 2-1-0 > 1-2-0 > 0-1-0 > 0-0-1.
It does not matter which order the individual classes/ids/tags appear in the selector ("td#foo a:hover" has the same specificity as "#foo td:hover a", namely 1-1-2). For rules with equal specificity, rules that appear later in the CSS override rules that appear earlier.
Multiple selectors (a.foo, a.bar { ... } ) are equivalent to putting each selector as a separate style and each can be overridden separately. For example for the rule "#foo td a:hover, a:hover { ... }", it very likely that "a:hover" will be overridden (0-1-1), while "#foo td a:hover" will probably not (1-1-2).
That concludes the CSS lesson for today ;) Steven