How to add Custom CSS in the WordPress

How to add Custom CSS in the WordPress?

Now that you have completed your WordPress site’s initial setup and chosen a theme that best suits your needs, it’s time to start customizing the site to make it your own after successfully logging into the admin dashboard of your site and hovering on the Appearance. A popup will be shown on the right side of the Appearance menu.

Click on the customize sub-menu to add custom CSS in the WordPress.

Once you click on the customize sub-menu, you will be directed to a page where you can see additional settings for customizing your WordPress theme, see below:

To customize the appearance of your website, navigate to the Additional CSS menu on the left side and input custom CSS code using specific classes and IDs. This will allow you to make precise adjustments to your website’s style and layout.

Here, we can view the current background color of our website. To modify it, I will access the Additional CSS section and write custom CSS code to style our site.

I have successfully changed the background color of the site and we can see the previous color and the current-change color (red). Here I changed the background color with the body tag.

Then I added the font style property. Now the text appears in italic font style.

Once I have added CSS, I proceed to publish the site, so that the changes can be viewed on the live site. Reload the site to check the changes on the live site.

We used here Twenty Twenty-One theme which provides a Color&Dark mode option in which we can change the background color of the site directly without custom code.

Click on it and see the setting which is provided. Here we can see the background color option and change it directly. Here I changed the background color from red to another color.

I have noticed that when I use the dark color, the theme automatically changes the text color from back to white. Publish the site again and see the live site.