This feature in CSS is utilized to assign higher priority compared to a regular property. The !important declaration signifies 'this is crucial'. This regulation offers a method of influencing the Cascade in CSS.
If we implement this attribute in the text, its precedence surpasses other levels of importance. It is advisable to refrain from incorporating this CSS attribute in your code unless absolutely necessary. Excessive utilization of this attribute may lead to numerous unforeseen outcomes.
If a rule is specified with this property, it disregards the typical behavior where a later rule supersedes earlier ones. When multiple declarations are designated as !important, the standard cascade process resumes. This indicates that the latest !important declaration will substitute the preceding one.
It elevates the precedence of the CSS attribute and disregards any properties that attempt to override it.
Syntax
element {
font-size: 14px !important;
color: blue !important;
...
}
Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: white ;
}
H1 {
color:blue !important;
}
body {
background-color:lightblue !important;
text-align:center;
background-color:yellow;
}
</style>
</head>
<body>
<h1>Hello World.</h1>
<h1>Welcome to the C# Tutorial. This is an example of <i>!important</i> property.</h1>
<p></p>
</body>
</html>
In the previous example, it is evident that the body's background color has been changed from pink to a light blue shade. This alteration occurred due to the application of the !important flag in the body tag, which overrides the initial pink background color.
Let's consider another instance of this characteristic to gain a clearer understanding.
Example
In this instance, we are utilizing the !important declaration on the text border. The h1 heading's border color will persist as red regardless of other styles applied. Similarly, the h2 heading's color and border color will remain green and violet, respectively, regardless of other declarations.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
text-align: center;
}
h1 {
border-color: red !important;
border: 5px green solid;
border-color: black;
}
h2{
color: green !important;
color: red;
border-color:violet !important;
border: 5px green solid;
}
</style>
</head>
<body>
<h1>Hello World :) :)</h1>
<h2>Welcome to the C# Tutorial</h2>
</body>
</html>