Has this ever happened to you? You install a plugin, it has the exact functionality you are looking for, but… it doesn't work properly. Even after changing all the settings, the latter does not always adapt to your WordPress theme. So, because of this small flaw, you are probably considering choosing another solution. 
Still, if you are a little DIY, and you may have been able to add CSS code here and there to solve a problem on your blog, then you can fix it, especially if in the plugin that does not work not properly, the developer does not offer CSS section, you will have to do it yourself.
This tutorial will allow you to achieve this by adding a code correctly on your WordPress Plugin.
But before, if you have never installed WordPress discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog.
Then, back to why we are here.
Custom CSS Styles = More Control over Appearance
Custom CSS styles allow you to manipulate the appearance of various elements beyond what the developer intended. Today, many high-end plugins include custom styling options, but free plugins aren't always meticulous enough in this regard.
Take one of the most popular plugins: Contact Form 7. It offers very little maneuverability on the CSS side. However, thanks to the personalized CSS, you can completely change all aspects of your forms.
But still, even plugins with detailed options do not always give you the ability to customize CSS code.
So, learning a little CSS, and adding it safely, will allow you to to be able to model what visitors can see
Why do you need to correctly add CSS code?
You certainly do not want to add messy CSS on your website. As many developers think, there is a good and bad way to add CSS code to your blog.
So much to see... 4 WordPress plugins to customize CSS on your blog
When you add CSS styles the right way, they will always be safe, even if you update your WordPress theme, and you'll be able to easily copy and paste them into a new theme if you ever decide to change yours.
See also How to customize the CSS of your WordPress website
Conversely, by adding them in the wrong way, your CSS code will be much more exposed and may not be effective. Some of you use the WordPress theme Divi. So I will show you how to add CSS code to this WordPress theme.
Where to add a CSS style on Divi
To safely add a CSS code on Divi, you will need to access the " Theme Options In your Divi menu:
Then, in the "General" tab (which will be the tab loaded by default), you will need to scroll to the bottom of the page. There you will find a section called " Custom CSS ":
Technically, all you need to do is enter your custom CSS code here and click " Save Changes ". But, because we want it to be really easy to move or copy, we're going to take it a step further. Discover other tutorials on Divi by consulting our best resources on Divi
Because you may have already added some custom codes to Divi, it will help you organize custom CSS in this section. To do this, you need to add a comment saying something like " CSS Styles Start Here Plugin ". Then you can add the custom CSS code in this section.
To add a comment, all you need to do is copy and paste this code:
/ * Plugin CSS Styles Start Here * /
The comment will not affect anything, but will help you organize your different custom CSS styles. Divi will also keep your custom CSS styles safe during updates, so you can not worry about losing them.
Where to add CSS code on other WordPress themes
If you use a different WordPress theme, you will need to add your custom CSS codes to your child theme. If you do not use a child theme, or do not know what it is, I invite you to read this tutorial: How to install a child theme on WordPress
Assuming you have your child theme set up, you can edit it directly in your WordPress dashboard by going to " Appearance> Editor "
Make sure you change the correct child theme. Your changes must be made to the file " styles.css ».
Then you just need to add your custom CSS exactly like you did before. First, create a comment block, and add your code:
To summarize
Before you embark on this adventure, you will need to have some knowledge of CSS. You will find various courses online. Also, you need to know that adding a code is not just about adding code. To find yourself in your changes, you will need to use comment blocks for example to give a reason for any CSS changes.
Discover also some premium WordPress plugins
You can use other WordPress plugins to give a modern appearance and to optimize the handling of your blog or website.
We offer you here some premium WordPress plugins that will help you do that.
1. Slider
Slider Pro is one of CodeCanyon's top three sellers. It provides a clean and intuitive user interface in the administration area and a smooth browsing experience for users and visitors.
It avoids unnecessary fantasies, which are often an obstacle for users who are looking for the information they need. In addition, it focuses on simplicity and performance, while offering a wide range of customization possibilities.
See also How to create a slideshow with Slider Revolution on WordPress
Its management of Urls on the browser's search bar is one of the features that marked us on the latter. As the name suggests, this is the professional solution you need.
Read also our 5 WordPress plugins to create FAQs on a blog
Its features are: theoptimized harnessing of images, the peasy customization,Flowing nimations, pmany layouts et more.
Download | Demo | Web hosting
2. ARMember
ARMember is a WordPress Plugin content protection. It is a unique solution that allows you to sell subscriptions on any website. It has a whole range of tools that allow you to protect completely or partially its contents.
Another of its features is the fact that it offers a free option which is a bit limited in terms of functionality. Speaking of features, this powerful WordPress Plugin offers among other things: The possibility of plan its contents, support for several subscription plans, easy configuration, migration between different subscription plans, WooCommerce support, several models of forms, and more.
It is also a reference in this niche.
Download | Demo | Web hosting
3. WooCommerce Cart Based Shipping
Cart based shipping allows you to set different shipping rates based on the items a customer has in their cart. There are three methods of calculation: by the total price, by the number of items in the basket, and by the weight. 
For example, the greater the subtotal or the weight of the basket, or the more items the customer buys, the higher the shipping rate.
See also our 10 WooCommerce plugins to create shipping scenarios
You can also set this feature to be available only in certain countries.
Download | Demo | Web hosting
Recommended Resources
Find out about other recommended resources to help you build and manage your website.
- How to Hide Affiliate Links on WordPress
- How to keep your visitors longer on your website
- 9 WordPress plugins to manage your product catalog
- 5 WordPress plugins to create FAQs on a blog
Conclusion
Here ! That's it for this tutorial that shows you how to add custom CSS code safely to WordPress. If you have some Comments or suggestions, do not hesitate to let us know in the reserved section.
However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
