One of the most common question for a non-CSS developer is how to find element selector. Well, it’s easy and you can do that by following the steps below.
Step 1: Open your website in Google Chrome
In this documentation, we will use our EightyDays theme for example.
Step 2: Right click on the element you want to change font and select Inspect
Assume that I want to change the font for the post title, so I right click on the post title and select Inspect as follows:
Then Google Chrome will open the Developer Tools and shows you what the element is on the left and what styles it has on the right:
Step 3: Find the selector that have font options
You need to look at the right panel to find which blocks have font options. Font options are one of the list below:
In the screenshot above, we see 2 blocks starts with
h1, h2, h3, ....
The selector we need is in the top block, e.g.
Note: If you don’t see any font options on the right, then change the highlighted line on the left up one level to check. If you still don’t see anything, the go one level up and so on.
That’s all, now you have the element selector for your settings page. Now go to the settings page and add one.