!important

The !important suffix increases the specificity of a style, effectively telling it to overrule all styles that do not have !important.

Comparison

Take the following style block. The declarations are applied in the order they’re defined, so the border color first becomes black, and then red, and after that the top border color is set to green, which gives the final result.

p.test {
  border-color: black;	
  border: 5px red solid;
  border-top-color: green;
}

This is a test element.

The element should have a green border-top, and a red border elsewhere.

!important test 1

Now we add !important to the first declaration. It now has a higher specificity than the other ones, and the border color stays black, despite the later declarations.

p.test2 {
  border-color: black !important;	
  border: 5px red solid;
  border-top-color: green;
}

This is a test element.

The element should have a black border on all sides.

!important test 2

If there’s more than one declaration marked !important, the normal cascade takes over again. In this case the green border-top overrides the black one because it’s defined later. The red color is ignored because it doesn’t have !important

p.test3 {
  border-color: black !important;	
  border: 5px red solid;
  border-top-color: green !important;
}

This is a test element.

The element should have a green border-top, and a black border elsewhere.