Override Inherited CSS

If you've been a web designer for long, you already know that there are ways you can override your CSS. You have done it before, may be many times before, but something still isn't working. Because it didn't for me. Now I am not saying those methods are incorrect. They might just not apply to your situation, like it didn't on mine!

I had a global CSS file and was inherited on all pages on my site. My page was divided into two parts, left and main body and I had a page where in I did not want the left part. So I needed to centralize my main body. My LEFT-NAV and ARTICLE-MAIN were adjusted using margins as shown in the below CSS

Image 1 - Left Navigation and Main Article

This is my global CSS


This is the part of my page that needed adjustment


Since I was working with SharePoint, I did not have lot of flexibility in terms of designing (because it has many dependent and moving parts). So this is what I did :

Image 2 - Main Article only

I negated the margin and I could get the ARTICLE-MAIN centralized. Again this might not be the solution to your situation, but it worked for me. You might want to try these as well:

# Wiping out inherited CSS
# CSS Overriding styles