So, you are trying to change the website layout via the Custom CSS code in your site. Hence you have searched for it and accidentally landed in this very page. Well then, you have landed to the exact page what you are searching for. Here, we will describe about how to apply custom CSS code in your site via the Inspect Element feature of the browser.
Why to Apply Custom CSS Code in your site?
It might come in your mind about why to apply Custom CSS code in your site right? Well, the answer to this would be, what if you want to display your site more uniquely? What if you want to show your site the best on the users eye? And what about if you are using the same theme in your site, which other thousands of sites uses too?
Well, now you may know about why to apply custom CSS code in your site from the above queries, right? So, why not try to apply the same in your site? So, now let’s move ahead and apply some of the Custom CSS code in your site via the browser’s inbuilt Inspect Element for this feature.
Use of Inspect Element to apply custom CSS code in your site
So, what is Inspect Element in your browser? It is simply the feature of the browser, which helps you to live preview any of the CSS changes in your site, written in it. After you find the perfect CSS code for your site, you can add it to your site’s CSS file, or if you are using WordPress, you can add it in Additional CSS Box.
First of all, you might want to know about how to open up the Inspect Element feature of your browser, right? Well, for opening it up, you can just click on the F12 button in your keyboard. Now, since every browser have different feature for the same, here, we are displaying for Mozilla Firefox and Google Chrome browser respectively for the same below:
The above image is of Mozilla Firefox browser for the Inspect Element feature, while the below one is for Google Chrome.
Now, after you can open up this feature in your browser, lets move ahead about how to apply custom CSS code in your site via the Inspect Element in your site.
For this, first of all, you can click on the arrow button in the top left corner of this very feature provided via the browser, and then in your site’s area, where you want to change the CSS, move the mouse to that area and just click on it. Now, you will find the custom CSS code applied to that area and modify it accordingly.
Now, after finding the exact area for your site as mentioned above, in the right side, you can find the Styles in Google Chrome, and Rules in Mozilla Firefox about how and where the CSS code is applied. So, move your mouse pointer towards it and then, in the very bottom, after the theme provided CSS code, just put the click on it and then you will get the option of adding more CSS code. So, just add the CSS code as required there until you find the perfect match for your site. The example for this is provided below as screenshot:
Now, after you find the perfect CSS code for your site, for the same, copy those CSS code and then, paste it to the CSS file, which is utilized by the theme of your site, at last. After that, your newly updated CSS code will be applied to your site as intended.
Conclusion
If you have followed up this tutorial properly and is successful on how to apply custom CSS code in your site via the Inspect Element feature provided via the browser, then, we can assume that you are more familiar on this feature than ever before. But, if you are still unable to do the same or want more information on this, then, do drop the comment below in the comment box and we will follow it up.
