Basics
For controlling "cellpadding" in CSS, you can simply use padding
on table cells. E.g. for 10px of "cellpadding":
td {
padding: 10px;
}
For "cellspacing", you can apply the border-spacing
CSS property to your table. E.g. for 10px of "cellspacing":
table {
border-spacing: 10px;
border-collapse: separate;
}
This property will even allow separate horizontal and vertical spacing, something you couldn't do with old-school "cellspacing".
Issues in IE ≤ 7
This will work in almost all popular browsers except for Internet Explorer up through Internet Explorer 7, where you're almost out of luck. I say "almost" because these browsers still support the border-collapse
property, which merges the borders of adjoining table cells. If you're trying to eliminate cellspacing (that is, cellspacing="0"
) then border-collapse:collapse
should have the same effect: no space between table cells. This support is buggy, though, as it does not override an existing cellspacing
HTML attribute on the table element.
In short: for non-Internet Explorer 5-7 browsers, border-spacing
handles you. For Internet Explorer, if your situation is just right (you want 0 cellspacing and your table doesn't have it defined already), you can use border-collapse:collapse
.
table {
border-spacing: 0;
border-collapse: collapse;
}
Note: For a great overview of CSS properties that one can apply to tables and for which browsers, see this fantastic Quirksmode page.
Either use a semi-transparent PNG or SVG image or use CSS:
background-color: rgba(255, 0, 0, 0.5);
Here's an article from css3.info, Opacity, RGBA and compromise (2007-06-03).
<p style="background-color: rgba(255, 0, 0, 0.5);">
<span>Hello, World!</span>
</p>
Best Answer
Specificity in CSS only concerns selectors, not their associated declarations.
!important
applies to a declaration, so it alone plays no role in specificity.However,
!important
influences the cascade, which is the overall calculation of styles for a certain element when more than one of the same property declaration applies to it. Or, as Christopher Altman succinctly describes:But not only that: because it influences the cascade overall, if you have more than one
!important
selector with a rule containing an!important
declaration matching the same element then selector specificity will continue to apply. Again, this is simply due to having more than one rule applying to the same element.In other words, for two rules with unequal selectors in the same stylesheet (e.g. same user stylesheet, same internal author stylesheet, or same external author stylesheet), the rules with the most specific selector apply. If there are any
!important
styles, the one in the rule with the most specific selector wins. Finally, since you can only have something that's either important or not, that's quite as far as you can go in influencing the cascade.Here's an illustration of the various uses of
!important
and how they're applied:The
!important
declaration always overrides the one without it (except in IE6 and older):If there is more than one
!important
declaration in a rule with the same level of specificity, the later-declared one wins:If you declare the same rule and the same property in two different places,
!important
follows the cascading order if both declarations are important:For the following HTML:
If you have two different rules and one
!important
:That
!important
always wins.But when you have more than one
!important
:The
#id
rule has a more specific selector, so that one wins.