CSS Important
The !important property in CSS is used to give a style rule higher priority
than others. It signifies that this rule should take precedence. While it
can be helpful in certain situations, it's best to use it sparingly, as
overusing !important can lead to unexpected results and make your CSS harder
to manage.
When a rule is marked with !important, it will override other rules, even
if they are defined later. However, if multiple rules use !important, the
most recently defined rule will take priority over the others.
In summary, !important boosts a property's priority and ignores the usual
cascading rules of CSS.
Syntax
element {
font-size:
14px;
color:
blue;
/* other styles */
}
Example
<!DOCTYPE
html>
<html>
<head>
<style>
h1 {
color:
blue; /* Use one style rule */
}
body {
background-color:
yellow; /* Remove redundant background
color */
text-align:
center;
}
</style>
</head>
<body>
<h1>Hello World.</h1>
<h1>Welcome to the
javaTpoint.com. This is an example of <i>!important</i>
property.</h1>
<p></p>
</body>
</html>
In the previous example, the body’s background color shows as light blue
instead of pink because the !important rule is applied to the light blue
color, overriding other styles.
Now, let’s look at another example to understand this property
better.
Example
In this example, we’re using the !important attribute on the border of the
h1 heading. This means the border color will always be red, no matter what
other styles are applied. For the h2 heading, the text color will stay
green, and the border color will stay violet, regardless of any other
rules.
<!DOCTYPE
html>
<html>
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<style>
body {
text-align:
center;
}
h1 {
border:
5px solid green; /* Keep the green
border */
border-color:
red; /* Set the border color to red
*/
}
h2 {
color:
red; /* Set the text color to red
*/
border:
5px solid green; /* Keep the green
border */
border-color:
violet; /* Set the border color to
violet */
}
</style>
</head>
<body>
<h1>Hello World :) :)</h1>
<h2>Welcome to
javaTpoint.com</h2>
</body>
</html>
