CSS free section of a web page

I am using jQtouch to build a mobile web app (knowing jQtouch isn't important in this case). It is a开发者_StackOverflow中文版 framework which applies a bunch of css to elements in a page (basic elements such as li and h1 tags).

I am building an rss reader of sorts, and the feed that I fetch has html in it. When I stick the content of an article into my page in the inner html of a tag that looks like

<div id="article"></div>

it inherits all of the css of jqtouch which doesn't look right.

How can I load content into a div without having css rules apply (and without having to rewrite the css files)

One solution a co-worker came up with was to create an iframe on the page, and using js, set the src="article.html?contents=URL_ENCODED_PAGE_CONTENTS"

and have article.html read the contents and stick that in a div.

It seems like a messy way to do it though, as it requires an external page and all.

I'm confused as to why you don't just set the styles of #article elements (ie. #article h1, #article li). If you don't it is unavoidable that they will inherit the styles of parents.

And iFraming will avoid the problem of inheriting styles BUT it is no longer valid in HTML5, which I assume you are using for mobile.