Saturday, November 14, 2015

How to Add !important Tags in Big CSS Chunks Quickly?
Today, Nafees Khan is going to post something unique about blogging that can help you in adding !important tags in CSS properties in minutes by just using Notepad's tool. If you also want to post a Guest Post of yours in Blogger Guiders, then you are welcome! Just follow to the following link:

Submit Guest Post: Now we will accept Guest Posts for Blogger Guiders!

Now let's come to the informative guest post written by Nafees Khan.

In this segment most probably we are going to see how to add !important tags in all of the CSS chunk with one click. This trick is very useful sometimes and will definitely help you to save your time.


If you are a developer or a Code tweaker, sometimes you need to override CSS for modification or some type of corrections but what happens is that the modified code doesn’t apply because the browser automatically selects the pre-existing CSS which you later installed. To correct this or to implement the modified CSS, you need to add !important tags directly after the CSS command like background:#000!important. Important tags work something like “Hey browser look up here, this is more important CSS code than that CSS and you gotta apply this style sheet instead of this.”

So lets get in!

How to Add important tags Quickly and Automatically?

Well,this is really very easy thing but most of the people would have never thought something like this.
For Example this is your modified CSS :-
.ModCSS { Mod1: Prop ; Mod2: Prop; Mod3:Prop; Mod4:Prop; }
And you want to add !important tag before every Delimiter (Semicolon used to inform browsers that now this CSS command has been closed and you should see the next one). So basically or normally you will click beside the semicolon and add !important tags. Right? But here I am going to show how to add the !important tag directly in all the CSS properties.

Steps are following:
  1. Copy the Modified CSS in the Clipboard (by Ctrl+C).
  2. Go to the Desktop.
  3. Right click there and choose 'New' from the menu (actually not choose. Just hover over it).
  4. When you hover on 'New', click on 'Text Document'.
  5. There, in the text file, paste all the CSS (in which you want to add !important before deliminator) which you had copied in step #1.
  6. Now. look at above in the menu. Click on Edit option and choose Replace. Alternatively you can also hit CTRL+H from your keyboard to open Replace dialog box.
  7. In the 'Find' input area put the delimiter (sign - ; ) and in the replace area put important tag (like this - !important; ).

Adding !important tag

  • Now click on the Replace all button.
  • You are done! Now see all the CSS properties with !important tag.

Input (which you had copied) :- 

.ModCSS { Mod1: Prop ; Mod2: Prop; Mod3:Prop; Mod4:Prop; } .ModCSS { Mod1: Prop ; Mod2: Prop; Mod3:Prop; Mod4:Prop; }

Output (which you got at the end) :- 

.ModCSS { Mod1: Prop  !important; Mod2: Prop !important; Mod3:Prop !important; Mod4:Prop !important; } .ModCSS { Mod1: Prop  !important; Mod2: Prop !important; Mod3:Prop !important; Mod4:Prop !important; }

How to Revert the Changes with one click?

You did all the tutorial correctly mentioned above. But what if you did this with a wrong chunk of CSS? Are you finding a solution to remove !important; tags fastly? Then follow these easy steps:
  • Just write !important in the first box.
  • Then write only (;) deliminator in the second box.
  • Press replace all and done! You will get what you had wanted. 
Reverting the Changes

Note:- You can Also use Word, Wordpad and Notepad++. They also have the same feature.

Final Words 

And that’s it you are done! Wasn’t it easy to just click and convert your all CSS into important CSS? This was a short trick but an amazing trick for Newbies as well as some professional web developers because they need to do this !important adding multiple times.

About Guest Author

Nafees Khan is a 19 year old amazing blogger. He is a web designer and lives in Mumbai. He jobs at their and to pass his free time, he learn blogging. He not only learn blogging, but also write articles about it on his own blog, NFS Tech Tricks. You can contact him with Hangouts or with his email.