How apply new CSS in an project that already has?

Question

I'm working in a project which already uses a stylesheet, but I would like to improve the website using Foundation. I tried to put the new stylesheet in the project but something that was like this:

Became this:

So I just stop using Foundation, but I really would like to use it, but how ? What did you guys do to apply a new CSS in a project that already has ?

update

<!-- CSS Ganglia -->
<link type="text/css" href="css/smoothness/jquery-ui-1.9.1.custom.min.css" rel="stylesheet" />
<link type="text/css" href="css/jquery.liveSearch.css" rel="stylesheet" />
<link type="text/css" href="css/jquery.multiselect.css" rel="stylesheet" />
<link type="text/css" href="css/jquery.flot.events.css" rel="stylesheet" />
<link type="text/css" href="./styles.css" rel="stylesheet" />
<!-- /CSS Ganglia -->

<!-- CSS Integra -->
<link type="text/css" href="css/integra/style.css" rel="stylesheet" />
<!-- /CSS Integra -->

<!-- CSS Foundation -->
<!-- <link rel="stylesheet" href="css/foundation/normalize.css" />   -->
<!-- <link rel="stylesheet" href="css/foundation/foundation.css" />  -->

Answer 1

This is a very complicated process that you are going about performing here... 99.99% of the time you can not just "plug and play" so to speak with new style sheets. For example it is likely that your two inputs up there have float: left defined in the old stylesheet. The new stylesheet overwrote those styles and made them essentially float: none which broke the layout.

So, what should you do.

Duplicate the current site out to a development directory (just make a folder in the root directory called dev and duplicate the entire site inside that directory. You'll use this directory to develop from without modifying a site that is currently live.

Include your foundation stylesheet/s below the current one. Then slowly go through the old stylesheet and figure out whats being over-written and merge it to a new stylesheet.