!important Rule
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link name="favicon" type="image/x-icon" href="https://skillzam.com/uploads/system/e353194f3b7cd1b75d69c3ab88041985.png" rel="shortcut icon" />
<title>!important Rule</title>
<style>
/* !important rule overrides the width property off all image elements */
img {
width: 20% !important;
}
/* All the below mentined css img rules will not have any impact due to above mentioned !important rule */
#img1 {
width:10%;
}
#img2 {
width:20%;
}
#img3 {
width:30%;
}
#img4 {
width:35%;
}
</style>
</head>
<body>
<!--
!important rule : is used to add more importance to a property/value than normal.
When used, it will override ALL previous styling rules for that specific property on that element.
-->
<h1>Demo: !important Rule</h1>
<div>
<img id="img1" src="/notes/examples/assets/img/rose.png" alt="rose" title="Image#1">
<img id="img2" src="/notes/examples/assets/img/rose.png" alt="rose" title="Image#2">
<img id="img3" src="/notes/examples/assets/img/rose.png" alt="rose" title="Image#3">
<img id="img4" src="/notes/examples/assets/img/rose.png" alt="rose" title="Image#4">
</div>
</body>
</html>