CSS Newbie Overriding Issue?

I have a simple login form that I've styled using css that can be viewed here:

http://www.skoolrox.com/JSON/employee-2.html

This page has custom CSS as part of the page itself.

Now I have a sample page (http://www.skoolrox.com/JSON/index.html) where I have a header, three column layout, and a footer. The leftmost column contain a series of links where I load the contents of the href (in this case, employee-2.html) into the middle column using jQuery's load(). It loads up the page in the middle when you click on the Login link.

My problem is that the Username/Password text gets pushed over to the right and has the formatting modified. I'm pretty sure that the main page (index.html) has CSS that's conflicting with the employee-2.html CSS.

So my question is, is it possible when loading employee-2.html into the middle column to "disregard" the outer CSS (in index.html) or ignore开发者_高级运维 it?

---

No. CSS is designed to propagate "down" the DOM tree. There's nothing in the HTML and CSS specs that allow you to say "do not inherit anything". You have to re-override anything you need "restored" later.

e.g.

styles:

.outer { color: red; font-size: 150%; }
.middle { color: blue; }
.inner { }

html:

<div class="outer">
    <div class="middle">
        <div class="inner">I wanna be red!</div>
    </div>
</div>

There's nothing in CSS that lets you say "ignore the .middle style and use .outer". You have to do

.inner { color: red; }