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. Custom CSS can be added in your WP site through different methods but what can be easier than pasting the code in a box( Additional CSS ) provided by the WordPress itself, since Version 4.7.

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:

  • 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.
  • 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 ).
  • 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 ).

  • 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 -> Customize -> Additional CSS

and then hit save to view the permanent changes.

Below is a GIF showing an example on how to create your own custom CSS and apply it through Additional CSS.

Important Tips

  1. Hide Element
    Since majority of queries requesting the custom CSS is to hide some element that the user no longer wants in his/her site. So, below is the sample code for hiding an element.

    .service_widget_block a.more-link {
      display: none;
    }
    
  2. Increase priority
    There is a predefined priority hierarchy of the CSS codes, although the CSS implemented through the Additional CSS box has higher priority then that of theme style.css, there are certain cases where the priority is inadequate and fails to accomplish its motive, means the code doesn’t work. So, the priority of your custom CSS can be set highest by adding !important at the end of you code as done below.

    .service_widget_block a.more-link {
      display: none !important;
    }
    

    Adding the ‘!important’ rule to your code, sets the priority to the highest, overriding all other CSS properties. And this might create new issues so, the users are suggested to use it wisely.

  3. Targeting different screen sizes
    Many of the users in the support forum request design tweaks for various screen sizes like mobile devices, tablets etc. So, lets move onto some examples.

    The code below hides the read more link if the viewport(screen size) is 480 pixels wide or wider.

    @media screen and (min-width: 480px) {
        .service_widget_block a.more-link {
      display: none;
      }
    }

    The code below hides the read more link if the viewport(screen size) is 480 pixels or less.

    @media screen and (max-width: 480px) {
        .service_widget_block a.more-link {
      display: none;
      }
    }
Creating your own custom CSS via Inspect Element