CSS Important Property Declaration and Usage
Learn CSS "!Important" property declaration and usage.
Published
CSS Important Property Declaration and Usage
CSS “!important” means ignore all already available CSS rules applying to particular CSS tag and use the one with !important property.
CSS “!important” applies before semicolon and where it applies it makes that CSS rule highest priority.
CSS !important Syntax
element {
property: value !important;
}
Example 1
h2 {
font-size: 14px !important;
padding-top: 5px !important;
}
Example 2
Here we have <h2> and it’s color is black using in-line style (CSS Precedence highest priority). However, we are changing the color of h2 using on-page style (CSS Precedence high priority) with important.
Please note if we remove important from in-page style than it will not work because on-line style has the hight priority.
<!DOCTYPE html>
<html>
<head>
<title>css important property declaration and usage</title>
<style>
h2 {
color: blue !important;
font-size: 20px;
}
p {
color:red;
background-color: #ececec;
border: 1px solid #1ded1d;
}
</style>
</head>
<body>
<h2 style="color: #000;">Webmastercampus.com</h2>
<p style="border:none;">This paragraph is about CSS !important property</h2>
</body>
</html>
CSS priority flow when applies to elements.
- Inline Styles (Highest priority)
- On Page CSS Styles (High priority)
- External CSS file (lowest priority)
However, when we use !important even in an external file, it ignores the normal priority flow and apply only available with !important.