Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How apply new CSS in an project that already has?

How apply new CSS in an project that already has?


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 ?


Problem courtesy of: Valter Henrique


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.

Solution courtesy of: Michael


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How apply new CSS in an project that already has?


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription