Skip to main content

!important Statement in CSS

As the name indicates it’s an important statement in CSS. From interview point of view too it’s commonly asked question even from the back end programmers. If you will search in google about the !important statement you will find a list of pages. I am writing about it to include everything possible under this topic and to keep it in my mind for times.

What is !important Statement?

The !important statement is actually a keyword you can use at the end of CSS property. It would give more importance to that statement. For example :

p {margin-left: 10px !important}

How it works?

Normally what happened, when you have two statements with same property and different values then as per the CSS rules, recent one would be used. For example :

p{margin-left : 10px}
p{margin-left : 20px}

in this case 2nd one would be used.

But when you use !important statement as following :

p {margin-left: 10px !important}
p{margin-left : 20px}

then the first one will get the importance and will be used.
Rules :

1) If a rule(CSS statement block) between an author(browser) and a user stylesheet conflicts, the user's rules will get applied over author's rules.

2) When 2 or more important statements that apply to the same element have same properties then the normal cascading rules will apply or the statement with the most specific selector will get applied.  For ex:

#example p {
    color: blue !important;

#example p {
    color: red !important;

Here as the statements are same except value, so latest one will be used.

div #leftSide {
            background-color: #00f !important;

#leftSide {
            background-color: #0f0 !important;

#header #leftSide {
            background-color: #f00;

In this style example, the first background-color value will take precedence because of two factors: First, it uses the!important declaration; and second, it is more selector-specific.

If you add !important statement to the inline style then that will of course have precedence: 

CSS: #example p {
    color: blue !important;

<div id="example">
  <p style="color:green !important;">This paragraph has an inline style</p>

the paragraph will be in green text and not blue.

Why it’s important?

1) Actually the statement was evolved for IE6 and previous versions. In all other browsers if you will use !important keyword with css statement then that particular statement would be used but it won’t work in IE6 and previous versions.

For example

#main {
width:auto !important;

In this case for browsers like firefox, safari, Opera, chrome and IE7 and latest versions first statement would work while for IE6 and previous versions 2nd statement would work.

The situation was fixed in IE7, but if it's in quirks mode, or you don't specify a doctype at all, then IE7 will revert to the same behaviour as IE6 and use the last declaration.
Internet Explorer 8, on the other hand, seems to always support !important declarations no matter what I did to try to make it act quirky.

2) It is also used to override inline styles. So with only one extra stylesheet and without changing any code in the html and it’s css you could change the whole appearance of the html.

Drawbacks : We all knew that each and everything have it’s own drawbacks if not used properly. Here is the following drawback of !important statement.

1) If !important statement is used without care then it could encourage sloopy and less maintainable code.

Conclusion :

Don’t use too much !important statements. Only use it where it’s required by keeping in mind it’s drawbacks.  If it’s used properly then it could save a lot of time and effort.
Some more important points :
#header {
            padding: 20px 10px 20px 10px !important;

Is equivalent to

#header {
            padding-left: 10; !important
            padding-right: 10; !important
            padding-top: 20; !important
            padding-bottom: 20; !important


Popular posts from this blog

Odoo: Qweb Templates Cache Issue

Hi Everyone, Today I was working on a hotel booking template in Odoo and changes made in the Qweb template(.xml) were not reflecting on updating module with odoo service restart. Tried few times without any success :(. Finally, I decided to delete the old template from Odoo backend and then update module again and it worked like a charm!! :) Steps to delete template from backend: Settings --> User Interface --> Views --> Search by template name Delete the used template. Although it's a small post, but I'm sure it will meet the purpose and help someone in the future. Thanks!!! Enjoy Programming!! :) Reference Links: ===================================

Odoo12/13: Add an extra action in the tree view action button

This post will help you to add an action window in Odoo. Odoo13: <act_window id="action_make_bank_payment"              name="Do Bank Payment"              res_model="account.ob.payment"              binding_model="account.move"              view_mode="form"              target="new"              binding_views="list,form"              domain="[('type','=', 'in_invoice')]"              groups="account.group_account_user" /> Odoo12: <act_window id="action_make_bank_payment"              name="Do Bank Payment"              res_model="account.ob.payment"             view_mode="tree,form"              domain="[('type','=', 'in_invoice')]"              groups="account.group_account_user" /> Thanks!!! Enjoy Programming!! :) Reference:

Odoo/OpenERP: one2one relational field example

one2one relational field is deprecated in OpenERP version>5 but you can achieve the same using many2one relational field. You can achieve it in following two ways : 1) using many2one field in both the objects ( ) 2)  using inheritance by deligation You can easily find the first solution with little search over internet so let's start with 2nd solution. Scenario :  I want to create a one2one relation between two objects of openerp hr.employee and hr.employee.medical.details What I should do  i. Add _inherits section in hr_employee class ii. Add field medical_detail_id in hr_employee class class hr_employee(osv.osv):     _name = 'hr.employee'     _inherits = {' hr.employee.medical.details ': "medical_detail_id"}     _inherit = 'hr.employee'         _columns = {              'emp_code':fields.char('Employee Code', si