What is !important rule in css ?

In this post we will learn how !important works in css and below are the details.

• Create one <div>
• Add class name as “container“
• Add below mentioned css to “container” class
• Here we will add !important role to width property in “container” class.

.container{
   width: 200px;
   height: 200px;
   background-color: #CCCCCC;
}

.container{
   width: 400px !important;
}

• In the above second “container” class with “!important” rule will override the <div> and “400px” with will be applied to <div>.
• CSS !important rule is used to add more importance to property.
• CSS !important rule will override all the previous styling rules for that specific property on that element.