CSS IMPORTANT

AKASH E



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>

Tags
Our website uses cookies to enhance your experience. Learn More
Accept !

GocourseAI

close
send