Does CSS have a "start over" feature?

Question

I'm using calendar_date_select (henceforth CDS) in a Rails application, and have a stupid question. When I embed the CDS component in the middle of an already-CSS-styled page, all manner of things go ugly-wrong with it (spacing, fonts, etc.). Clearly the elements inside the CDS have inherited unwanted stuff from the styles already working in the containing page.

Now, I could use a combination of, say, Safari's CSS debugging and analyze what's wrong element-by-element. But that's (A) tedious, and (B) might load up my component's styles with tons of container-defeating special cases. If nothing else, I'm certain to change the containing page's styles in the future and would have to maintain the special cases.

My question: Is is possible to have a DIV in a page that essentially backs out all the existing styling? Is there a simple one-liner that will do this? Failing that, can it be done on an element-by-element basis?

E.g. I know what tags the CDS generates, so I could list each of them:

{ p: "#--NOTHING--#"; a: "#--NOTHING--#"; }

where #--NOTHING--# is the Magic Turn Off All Inherited Styles incantation.

http://code.google.com/p/calendardateselect/

Thanks, peeps.

Answer 1

In CSS3 there is initial which should be the thing you are looking for. If you are (like most people) targeting CSS1-CSS2 you have no other chance than to change your own CSS so that the CDS is never affected by it.

Answer 2

You may want to surround your CDS component with a div, perhaps give it an id of CDS_wrap or something.

Then in your CSS, give a style reset to that div and all of its contents like so:

div#CDS_wrap * {
  padding: 0;
  margin: 0;
  font-size: 12px;
  etc...
}

Answer 3

Braxo's on the right track, but didn't speak for rule priority. In addition to the (notional) #CDSReset on the calendar container and the Braxo's suggested rule, you need to overload that rule with bogus comma-separated id selectors until its priority lies where you want it:

#CDSReset, #bogusAlfa, #bogusBravo, #bogusCharlie /* &c. */ {
  ...
}

When I do this in a stylesheet, I make a habit of commenting those overloaded rules so that I don't mistake the selectors as anything but bogus bits included for the expressed purpose of gaming the priority rules.