html - Reset CSS for a certain area of the page?

Question

I am working on a CMS. One of its functions is the editing of HTML "chunks" in a WYSIWYG editor that are displayed as individual pages.

I have an area in the CMS where these chunks are previewed.

The chunks rely on a "foundation.css" file that is loaded into the WYSIWYG editor. It does some small resets, defines a default font and text color, and is overall very simple.

The CMS, obviously, comes with a ton of CSS statements, many of which affect general settings like font size, family, color, line-height, paddings and the like.

Naturally, when I try to display a HTML chunk in a CMS page, it looks different from when it is displayed only with the foundation.css stylesheet.

Can anybody think of a way to clean a defined area in a HTML page (say, a DIV) from all previous style definitions? I can't.

• an Iframe displaying the chunk and embedding foundation.css would help, but I fear for the user's workflow when 5-10 IFrames have to be rendered and then adjusted in height via JS once they are loaded. Yuck.

• I have thought about "lifting" all other CSS to a sub-class (i.e. adjusting the CMS' CSS), but that would involve touching a lot of files, some probably PHP source code, and I'd rather not do that.

I don't think this has a solution but you never know.

Answer 1

There are CSS Reset stylesheets available; you could modify those, perhaps?