The **`!important` property** in CSS means that all subsequent rules on an element are to be ignored, and the rule denoted by `!important` is to be applied.  This rule overrides all previous styling rules ​-- the `!important` property increases its priority.

# Syntax
The `!important` property is mentioned immediately before the semicolon:
```css
h1 {
  background-color: red !important;
}
```

# Code

In the example below, the normal color for the `h1` tag was blue but, because of the `!important` property, a different color is applied. Similarly, a different color is applied to the *background* instead of  red:

h1 { 
	color: blue ; 
} 
h1 { 
	color: #FF8882 !important; //important property
} 
body { 
		background-color: #FBF2ED !important; 
		text-align:center; 
		background-color: red; 
	} 

<!DOCTYPE html> 
<html> 
    <head></head> 
	<body> 
		<h1>Hello World!</h1> 
		<h2>Welcome to the world of programming.</h2> 
		<p></p> 
	</body> 
</html>					 


What is the !important property in CSS?

Checkout some of our related courses

CSS Theming for Professionals

Sass for CSS: Advanced Frontend Development

The Complete Advanced Guide to CSS

Syntax

Code