Beautify the default H tag style of WordPress (3 steps)

Continue to share the wordpress website building tutorial. Today we modify the default H tag style of the wordpress site to make it look better. If the content of your website articles is relatively long, then there is a high probability that you will use H tags, at least H2 tags, or H3 tags, which can make the content of the website more organized and have many benefits for website SEO optimization.

But the default H tag style of wordpress is rather ugly, there is only one big and thick style.
Next, we will start to simply beautify the H tag style.

Step 1: Find the H tag style of the current website

Someone may have tried to directly use the CSS style shared by others, but it did not take effect when used directly, because different websites have different themes, and the original CSS style ID is different, so we need to find the H tag of the current website first CSS styles.

First open an article containing the H tag, press F12 to enter the developer mode while browsing, select the H tag, and find the CSS style of the current H tag from the code, as shown on the right side of the above figure, we have determined that the H2 style ID of the current website is【.blog-details.details-content h2】. Then we just need to add the written CSS style into it. In the same way, we can find the H3 tag as 【.blog-details .details-content h3】.

Step 2: Write CSS styles

Next, we can directly debug the CSS style in the browser. If you don’t understand it, you can directly find someone else’s written one to modify it. Finally, 【WP-Host/悦然wordpress建站】 The finalized style is as follows:

.blog-details .details-content h2 {
    font-size: 22px;
    margin-top: 20px;
    padding-left: 10px;
    position: relative;
    border-bottom: 1px #eee solid;
    border-left: 5px solid #fcab03;
    margin-bottom: 10px;
}

.blog-details .details-content h3 {
    font-size: 18px;
    margin-top: 20px;
    padding-left: 10px;
    position: relative;
    border-bottom: 1px #eee solid;
    border-left: 3px solid #fcab03;
    margin-bottom: 10px;
}

Step 3: Add CSS code

Finally, we only need to add the above CSS code to the currently used wordpress website building theme.

Here【WP-Host/Yueran wordpress website building】recommended to add additional CSS code, do not directly modify the CSS file of the theme. The above code can be directly added to the [Additional CSS] function of the theme, or added to other CSS plugins. For example, you can install the Simple Custom CSS plugin.

Simple Custom CSS

https://wordpress.org/plugins/simple-custom-css/

The final H tag effect is shown in the figure above, which are the effects of H2 and H3 tags, which will look better than the original H tag style.

Summarize

Today’s wordpress tutorial is shared here. Here is a reminder that although CSS styles can achieve many beautiful effects, if it is not necessary, you should not have too many CSS styles, otherwise it will affect the effect.