How to find the right CSS class to edit to apply custom CSS in WordPress

There are many plugins for WordPress that allow you to apply custom CSS. Most theme have their dedicated sections. However how do you know which class you need to modify?

Use Google Chrome development tools to inspect

I use Google Chrome development tools for this. Here is a quick screencast that shows how to find the right class and edit / apply custom CSS:

Here is what I do step by step

1. The tab titles “Description” and “Reviews” are crammed into the left corner. I want them to move more to the right.
2. 00:02: I toggle Chrome development tools (dev tools) by right-click, inspect. I right-click on the element I want to change. Clicking on the element I want to edit opens the markup and jumps to the vicinity or right on the element I want to edit.
3. 00:09: After the dev tools open I realise the layout is now responsive. I need it to be in standard desktop layout. I switch the dev tools from dock right to dock to bottom. This gives the layout more room in width and gets rid of the responsive layout.
4. 00:17: I click on the elements in the markup until my element is fully selected. At first #tab-reviews looks good, but ultimately reviews_tab is more complete in highlighting my element. You often have to correct the element selection after toggling the dev tools via right-click – inspect.
5. 00:22: The WooCommerce tabs class has a margin defined. Seems right. I deactivate what is already there to see if anything changes. I then add some on my own and watch for changes. It gets crossed out immediately which means it is getting overwritten. No good, moving on.
6. 00:34: I move up one class and spot the padding. Editing to see if that changes anything and heureka. The rest is simple try and error.

That is it. I hope it helps you to find your own CSS classes to successfully apply your custom CSS.

Feel free to comment with any questions you have.

69