Creating your own custom CSS via Inspect Element

Most of the user queries that we receive, either in the forum or via mail are related to simple design tweaks like changing the color, font-size which requires custom CSS.

Since WordPress 4.7, users can now add custom CSS directly inside the Customizer which you can find in AppearanceCustomizeAdditional CSS. This is super-easy and you would be able to see your changes with a live preview instantly.

Creating a custom CSS code is quite straight forward, if you are familiar with the basics of HTML and CSS. The sole purpose of this article is to help our users who have the required knowledge and are interested to write the code for themselves. So lets move along with doing the same by following the steps below:

  1. First in your site hover over the element for which you want to write the CSS, right click on it and then click on Inspect Element.
  2. Now, docked at the bottom, you will see the HTML of the site and to the right of it you can see the CSS related to the selected HTML element (classes and IDs). 
  3. If you have selected the desired HTML element then most probably its styling (CSS) can be seen on the right side, now if you want to change the existing style then you can just change the values as desired. You can see the changes in your website as you change the values (CSS codes).
  4. And if you want to provide completely new styling to the selected HTML element then you can click on the + icon on the CSS section and then you can write the desired CSS inside the generated target class / ID. However. the HTML class/ID generated by clicking the + icon may be not be precise enough to target the desired element so you may need to add the additional classes or IDs before the generated class or ID. The additional classes or IDs can be copied from the elements wrapping the desired element and one thing to remember here is that before the class a (.) dot needs to be added and a (#) hash before the ID.

At last after you have got your desired CSS code you can copy and paste it in Appearance → CustomizeAdditional CSS and then hit save to view the permanent changes.

It should be noted that the CSS added in this area is theme-specific, so if you switch themes, you’ll lose your CSS.