Forcing text properties across many sites

[wheel]

I'm designing a form using css. The form on it's own looks great. However when I drop the code into my wordpress theme it gets downright ugly. Text goes big or small, button colors change to black, all sorts of crazy. I'm sure this is due to the code inheriting properties.

That's a problem, because I'm actually going to be providing the form to a fair number of other websites, all run by non-techies. I need cut and paste code that looks the same no matter what container it's placed in.

I know this is a general question - but what properties should I be fixing in my css to ensure that the entire form (text/borders/background/buttons, etc) looks the same on the stand-alone as it does when inserted inside someone else's html with other css?

(I googled stuff about preventing inheritence and it seems even the suggestion of doing so brands me as a heretic :) So I'm trying to do it right. ).

[D_Blackwell]

Can you wrap the <form> in <div> with a specific id, and then tie all of the CSS that affects the form elements to this?

#form-wrapper {

}
#form-wrapper form {

}
#form-wrapper input {

}

et cetera

<div id="form-wrapper">
...................

Or put classes on each specific element?

input.my-css[type=textarea] {

}

or

textarea.new-css {

}

<form class="my-css">

Either approach should over-ride the CSS that is getting in the way of the results you want.

[swa66]

even as inline CSS can override anything in any other author controlled (not user controlled) stylesheet, you'll have a hard time resetting every possible setting they might have made unless you revert to client side scripting (and even then it might be not so trivial).

An iframe might be your best solution: it's another web page and gives you control.

[wheel]

Ah! thanks swa66. An Iframe is probably the easiest solution to this.