{"id":637,"date":"2022-05-25T11:15:20","date_gmt":"2022-05-25T11:15:20","guid":{"rendered":"https:\/\/gyanipandit.com\/programming\/?p=637"},"modified":"2023-03-28T13:13:04","modified_gmt":"2023-03-28T13:13:04","slug":"css-important","status":"publish","type":"post","link":"https:\/\/gyanipandit.com\/programming\/css-important\/","title":{"rendered":"CSS <strong>Important Rule<\/strong>"},"content":{"rendered":"\n<p class=\"has-text-align-center\"><strong>CSS Important Rule<\/strong><\/p>\n\n\n\n<p>Sometimes it may happen, that there is some property for some element, which is very important to us, and the thing is that we do not want that property to be overridden at any cost. In the below example, we have 2 divs with us, and one div has an id special. Let&#8217;s try to understand the thing with help of an example &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"484\" height=\"319\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/important-rule.jpg\" alt=\"\" class=\"wp-image-638\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/important-rule.jpg 484w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/important-rule-300x198.jpg 300w\" sizes=\"auto, (max-width: 484px) 100vw, 484px\" \/><\/figure>\n<\/div>\n\n\n<p>If you are following along, and trying to open the file in the browser, the output would be something like this &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1023\" height=\"126\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/important-rule-1.jpg\" alt=\"\" class=\"wp-image-639\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/important-rule-1.jpg 1023w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/important-rule-1-300x37.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/important-rule-1-768x95.jpg 768w\" sizes=\"auto, (max-width: 1023px) 100vw, 1023px\" \/><\/figure>\n<\/div>\n\n\n<p>We first wrote the color property for some div. Now, when we are declaring the same thing for the div with some id, we are being specific. But we have also specified that the color property declared for the div is important. Observe how we have done it in the code. We have just written! important after the property. With this, we are just declaring that this property for this element is important, and we do not want it to be overridden at any cost.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"CSS Important Rule | Lecture 37 | CSS for Beginners\" width=\"696\" height=\"392\" src=\"https:\/\/www.youtube.com\/embed\/mHbWEAnOtY4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>We have tried doing it with help of the id. In the above code, try to remove the! important from the code, and the color property will be overridden.<\/p>\n\n\n\n<p>But since, since we are willing not to override the property at any cost, we are using the important rule there.<\/p>\n\n\n\n<p>This rule specifies that some property is important. If you use this rule with some property, then it will not be overridden at any cost, because the browser feels that this specific property is an important property, and should be retained at any cost.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS Important Rule Sometimes it may happen, that there is some property for some element, which is very important to us, and the thing is that we do not want that property to be overridden at any cost. In the below example, we have 2 divs with us, and one div has an id special. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[9,199,13],"class_list":{"0":"post-637","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css-tutorial","7":"tag-css","8":"tag-css-important-rule","9":"tag-css-tutorial"},"_links":{"self":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/637","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/comments?post=637"}],"version-history":[{"count":3,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/637\/revisions"}],"predecessor-version":[{"id":5678,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/637\/revisions\/5678"}],"wp:attachment":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/media?parent=637"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/categories?post=637"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/tags?post=637"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}