{"id":765,"date":"2012-04-29T18:09:47","date_gmt":"2012-04-30T01:09:47","guid":{"rendered":"http:\/\/virendrachandak.wordpress.com\/?p=765"},"modified":"2012-07-29T00:32:33","modified_gmt":"2012-07-29T07:32:33","slug":"css-important-declarations","status":"publish","type":"post","link":"https:\/\/www.virendrachandak.com\/techtalk\/css-important-declarations\/","title":{"rendered":"CSS !important Declarations"},"content":{"rendered":"

Recently I came across lot of code using CSS !important declaration. I had known that this declaration existed but I didn’t knew what it was and had never used it. So than I did my research on it and decided to write a post about it. In this article I will discuss what it is, how it is used, when to use it, etc<\/p>\n

\n

What is !important?<\/h3>\n

The !important is a key word which is added to the end of the CSS value to give it more weight. In CSS the rules are applied to elements in a cascading manner.<\/p>\n

    \n
  1. Find all the declarations that apply to the element in question.<\/li>\n
  2. The order in which the styles are applied based on importance and origin. The weight of style sheets are, from least weight to highest weight, first user agent styles, than user, than author style sheets, !important author styles and the height weight is for the !important user styles.<\/li>\n
  3. The more specific a selector is, the higher weight it will get. e.g., a style on “div.main p” will have a higher precedence than one just on the “p” tag.<\/li>\n
  4. The rules work in top to bottom order. Rules that are defined later in the document tree have higher precedence than those defined earlier. Also, if rules are imported from style sheet then they are considered before the rules which are directly in the style sheet.<\/li>\n<\/ol>\n

    The !important is used to force the style to an element and not be overridden by the cascading CSS. When the !important is used that rule gets more weight than it naturally has.<\/p>\n<\/div>\n

    <\/p>\n

    \n

    How to use !important?<\/h3>\n

    The !important declaration is a keyword that can be added at the end of any CSS property\/value.<\/p>\n

    \r\n#example{\r\ncolor:#000 !important;\r\n}\r\n\r\n#container #example{\r\ncolor:#666;\r\n}\r\n<\/pre>\n
    In this example we have first have a rule to make the color of text for the element with id example to be black (#000) with !important. Then we have another rule to make the color of text for the element (#example) to be grey(#666). So now the color of the text of the element (#example) would be black and not grey because of the !important declaration. In case we didn’t use the !important then the color would have been grey.<\/p>\n<\/div>\n
    \n
    When to use it?<\/h3>\n
    I think the !important declarations should not be used unless its is absolutely necessary<\/strong>. Using !important breaks the natural cascading effect of the style sheets. It also will make you code difficult to maintain. I have never used !important declarations. However, there are certain conditions where you will have to use !important.<\/p>\n
    Override Inline Styles in user-generated content<\/div>\n
    If users can add content using the WYSIWYG editors then they can format the content. Also, if you allow the users to add html code they can also specify inline styles to the text. However, each user can make it different and if would not be consistent with your site. So to prevent certain formatting (like background, text color, size etc) you can use !important in your style sheet and as the !important declaration in author style sheet overrides the inline style your content would be consistently displayed for all users-generated content.<\/p>\n
    Temporarily fix an urgent issue<\/div>\n
    If there is some CSS issue in your code and you want to make sure that the a particular style is applied you can use !important to temporarily fix the issue on the live site until you find out a better way(which might take some time). After adding the !important on live site you should work on modifying your rules in order to avoid !important and once you have the fix you can update the code on live site.<\/p>\n
    Print stylesheets<\/div>\n
    The !important declaration can also be used in a print style sheets to make sure that the styles will be applied and not overridden by anything else.<\/p>\n<\/div>\n
    \n
    Conclusion<\/h3>\n
    !important declarations should be avoided as long as possible until absolutely necessary and there is no other alternative. You should not use !important tags without giving it a forethought. It should be used only in special cases and not always. I personally have never had to use !important declarations.<\/p>\n<\/div>\n
    \n
    Related Articles<\/strong>:<\/p>\n