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>					 


codemirror

What is the !important property in CSS?

Syntax The !important property is mentioned immediately before the semicolon: 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: 

Gain insights into practical CSS theming methods, delve into problem-solving, and discover the css-theming package to create highly customizable, dark mode-friendly apps in this course.

CSS Theming for Professionals

Gain insights into Sass for CSS, exploring nesting, variables, mixins, and more. Discover methods to structure projects and write dynamic, reusable styles for advanced frontend development.

Sass for CSS: Advanced Frontend Development

Gain insights into advanced CSS concepts, delve into responsive design, explore animations, learn practical projects, and discover powerful tools. Perfect for backend engineers and budding developers.