how to cancel off the css global overriding for content inside few pages?

Question

style.css

/*This apply globally to container, including  header, footer, left, right and content */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, 
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0;
    font: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    vertical-align: baseline;
    color: var(--color);
}

then here is the css imported from other website, all the elements for these css will sit inside

Now this is html:

<div class="container">

header div

left div

<div class="content"> contents copied from external website, and their independent css. </div>

right div

footer div

</div>

</body>

all things inside content div for few pages will need to follow full set of css copied from external website. the css and content copied from external website is dynamically generated, different page will have different content widget thing, so it make no sense for me to do those !important inside

So I want to make this set of global div, span, applet, object, iframe... available to all , EXCEPT whatever elements inside div.content example p inside content shouldn't inherit any font-style, font-weight, color, etc.

The idea is keep current css that will use for all other parts, but not affecting whatever inside div.content

How can I do that?