Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What are the implications of using "!important" in CSS?
The !important rule overrides all previous styling rules. It is based on the concept of priority or specificity. The !important rule provides a way to make your CSS cascade. It also includes the rules that are to be applied always. A rule having the !important property will always be applied, no matter where that rule appears in the CSS document. Let us see an example −
Priority - Without Using !important
Example
Let us first see an example how the specificity and priority works without using the !important −
<!DOCTYPE html>
<html>
<head>
<style>
.mycolor{
color: red;
}
.mycolor{
color: orange;
}
</style>
</head>
<body>
<h1>Checking Priority</h1>
<div class='mycolor'>
This is orange colored
</div>
</body>
</html>
Output
Priority - Using !important
Example
Now, we will see an example how the specificity and priority works using the !important −
<!DOCTYPE html>
<html>
<head>
<style>
.mycolor{
color: red !important;
}
.mycolor{
color: orange;
}
</style>
</head>
<body>
<h1>Checking Priority</h1>
<div class='mycolor'>
This is red colored because we used !important to override
</div>
</body>
</html>
Output
Updated on: 06-Dec-2022
90 Views
Advertisements