« I’m Getting Married!
Models et al »

Tuesday, July 21st, 2009Tuesday, July 21st, 2009

Override CSS

by Shawn @ 6:38 am · filed under Uncategorized

So I found myself wanting to override a few items in a sitewide CSS file, but only for a single page... Rather than make entire new CSS elements, I figured there had to be a way to override the CSS file with a <style> clause within the page itself...

Sure enough, I finally figured it out... !important...

<style type="text/css">
<!--
.overrideme div.overridemetoo {
  overflow: hidden !important;
  display: none !important;
}
-->
</style>

!important can go at the end of any style attribute and it will override anything that isn't "important".

6 Responses to “Override CSS”

  1. Paul Says:
    July 21st, 2009 at 4:30 pm

    !important is my crucial go-to whenever I’m too lazy to figure out a more specific hierarchy.

  2. Sundaybrew Says:
    July 21st, 2009 at 8:11 pm

    Hey Shawn,

    This is great, Thanks man,

    I am pretty good at css but still learning.

    Thanks for the tip.

    Joseph

  3. luckymurari Says:
    July 24th, 2009 at 1:57 am

    Not to forget the big bad and ugly IE #fail at it.. It ignores !important

  4. Shawn Says:
    July 24th, 2009 at 2:05 am

    Who cares… IE is stupid. I’m tempted to just block it at the router level.

  5. Sundaybrew Says:
    July 27th, 2009 at 10:27 pm

    @I’m tempted to just block it at the router level.

    LOL - I wish IE would go away as well !

  6. Tunasaurus Rex Says:
    August 19th, 2009 at 11:49 pm

    The syntax for that little gem threw me off the first time I saw it. I kept reading it as “not important”.

Leave a Reply