!important in css

It reads like not important, but it means totally the other way. I got curious when I first encountered this property in CSS. It has really took a long time for me to discover this property.

After going through the details of this property, in order to make my understanding simler, it is some what like the final keyword in Java. Dont take my word for granted, its just a persection. I am just trying to put things together to explain the stuff.

Following is a simple explanation of the same

Guess that I'm using the following code to style my paragraphs in my document
p {color:#0000ff}  --> should apply blue color to my paragraphs
p {color:#000000}--> should apply black color to my paragraphs and will override my previous blue style for para tags

Eventually all my paragraphs will be black in color

To ensure that certain things dont get overrided, let me say i do the following (!important atlast),
p {color:#0000ff !important;}
p {color:#000000;}

This is my target paragraph. Note that I am blue in color

This is an unexpected property that I least expected to find in CSS :).
But be warned, this is not java, so let me say the following, as far as I have tested, the !important tag is a bit tricky and is jerking around a bit as well. Its because, say I do the following

p {color:#ff0000;}
  some paras
p {color:#0000ff !important;}
  some paras
p {color:#000000;}
  some paras

Now all the "some paras" that I am refering to will be in blue color. So no matter where you declare !important property for styles, it gets applied to entire document. Thats ridiculous and will definetely be useful some times. But I am scared of it.

Again Diamond cuts Diamond and !important overrides !important - Wow howz my moral of the story (cool down plz)

p {color:#0000ff !important;}
p {color:#00ff00 !important;}

This will ensure that all your para tags are green in color. Hope you get the picutre, if not dont expect me to explain further, try it out :).