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; }