The “override.css” Solution

Just a short note to share some exciting news. Now, I do realize this might not be at all news to some people, but given the fact that it took me 2 days to find this solution – and mind you, I’m good at searching for stuff on Google – and even then it was more like a suggestion than an actual text offering the solution. So, like I said while this is a pretty obvious fix for overriding css style sheets, there’s not much talk about it on the internet. Hence me sharing it with people who might bang their heads against the wall just like I did yesterday and today. Ok, I did not literally bang my head against the wall, but in all honesty my frustration level was as red as it can get, and I’m a calm guy. Except when I’m not… 😀

So, the grand solution, the megafix of my week: override.css! It turns out if you start using a framework like Zurb’s Foundation or almost any other for that matter (Less, MQF, 1140 Grid, Skeleton, Inuit, Amazium and others) you might end up with a or more CSS files that help you keep your design together. However if you’re a designer that wants more than just a quick prototype, you might feel the need to edit those CSS files. Bad idea! Stop right now, it will not work properly and you’ll never know why because it’s a big ass CSS file with more lines of code than you can take. Instead of editing, use an override.css file.

Now to those that might be wondering what the heck this “override.css” is, it’s really simple. All you need to do is create a brand new css file, include it last in your HTML or PHP head like this

<link rel=”stylesheet” href=”stylesheets/override.css”>

and start writing your own css as you’d do with any other regular design. The result is pretty darn magical! It’s a hybrid! 😀 In fact what happens is classes that were taken from the framework will still be applied and all other properties except those that you wrote yourself in the override.css file. To properly do this use some ids and additional classes in your design by which they will be identified in the override.css. That’s pretty much it. I know it sounds obvious, but trust me, it tends not to be. And now, have a great week(end), and happy overriding and designing to all of you!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s