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>
</div>

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;
width:800px;
}

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
}



Comments

Popular posts from this blog

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 ( http://tutorialopenerp.wordpress.com/2014/04/23/one2one/ ) 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

How to draw Dynamic Line or Timeseries Chart in Java using jfreechart library?

Today we are going to write a code to draw a dynamic timeseries-cum-line chart in java.   The only difference between simple and dynamic chart is that a dynamic event is used to create a new series and update the graph. In out example we are using timer which automatically calls a funtion after every 1/4 th second and graph is updated with random data. Let's try with the code : Note : I had tried my best to provide complete documentation along with code. If at any time anyone have any doubt or question please post in comments section. DynamicLineAndTimeSeriesChart.java import java.awt.BorderLayout; import java.awt.Color; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import javax.swing.Timer; import javax.swing.JPanel; import org.jfree.chart.ChartFactory; import org.jfree.chart.ChartPanel; import org.jfree.chart.JFreeChart; import org.jfree.chart.axis.ValueAxis; import org.jfree.chart.plot.XYPlot; import

Odoo: Download Binary File in v10

To download any binary file in Odoo10 following is the link: http://127.0.0.1:8069/web/content?model=<module_name>&field=<field_name>&filename_field=<field_filename>&id=<object_id> module_name    - the name of the model with the Binary field field_name         - the name of the Binary field object_id            - id of the record containing particular file. field_filename    - name of a Char field containing file's name (optional). So if you want to call a function on button click and download the file, code is as follow: file_url = "http://127.0.0.1:8069/web/content?model=<module_name>&field=<field_name>&filename_field=<field_filename>&id=<object_id>" return {     'type': 'ir.actions.act_url',     'url': file_url,     'target': 'new' } In Reports or web page, you can use it as: <t t-foreach="files&qu