What is so !important?
I came across a problem when working with ordered and unordered lists.
Here is an ordered list in case you were wondering what the hell it is:
- Proper mark-up
- I didn’t type these numbers
- Each item gets a number
- Or maybe a roman numeral
I want to give all my normal-looking regular lists a little style. No problem, I add a 50px left margin to the li’s. My paragraphs have a 30px margin and I like the lists to be indented a little bit. Just like the example above.
But what about my other lists? Like a list of links that I want to display inline? Whoa - they can’t have a 50px left margin! That would look like crap! So, I gave these lists a special class (named “links” or whatever). I styled them inline with NO margin.
Well, since the style properties cascade, I figured a margin of zero would bring the link lists back to normal. Well, crap! It didn’t work! How about making a negative margin (-50px)? Nope. That didn’t work either. Why not? I don’t know.
Then I remembered the “!important” declaration. I haven’t used it, but I notice it when I look at other websites’ CSS. Yes, we all do it. I found a reference to this declaration in my trusty CSS Pocket Reference (by Eric Meyer) which says “those rules marked !important are given greater weight than those that are not.”
Simple enough. So I tried it:
ol.links li
{display: inline;
margin: 0 !important;}
And it worked like a charm. I love web design.
Mike Foley on I’m a McCain/Palin Supporter
Carol on I’m a McCain/Palin Supporter
Shane on I’m a McCain/Palin Supporter
Hey, I don't want this picture. What gives?
my hands smell like oranges…even after I washed them! Sweet.