you want to change the appearance of your site, or change some colors or some elements and add more aesthetic touches and customizations that the template does not often support, then you should learn how to add custom CSS in WordPress to give you greater freedom in improving the design of the site.
CSS, or (as it is translated into Cascading Style Sheets) is a coding language that controls the appearance of HTML elements on a web page, through which you can change the appearance or basic structure of your site, and by controlling and writing CSS codes, you can change many properties such as Color, size, layout, width, etc.
Therefore, if you want to control the features or appearance of your WordPress site, you must learn how to customize or add CSS codes within your site. Where you can modify previously existing CSS codes or add new codes to modify an appearance, color, font, and many more.
In this article, we will learn how to add custom CSS to modify a specific part of your site’s design as desired.
Ways to add custom CSS code
There are many ways through which you can add, customize and write CSS code in WordPress. You can do so by customizing the template in an easy way in a specific option that attaches the code directly, or by installing some plugins designated for that purpose.
Add CSS using template settings
No matter which WordPress theme you use, most themes enable you to modify CSS using the built-in theme customization tool. To do this you can go to: Appearance << Customize << Additional CSS Styles
Through this custom, you can write the code you want and modify it as you wish. You can also work on all screens, from laptops to tablets, phones, etc. What distinguishes this method is that when you write CSS instructions, you will be able to see the changes immediately in real time.
The following diagram shows you the steps easily:
Add CSS using plugins
If you encounter a problem with the previous method, you can add CSS code through the Simple Custom CSS and JS add -on, which helps you add CSS as well as JavaScript through a simple editor, where you install the add-on on your site to start using it. Also read about how to install the WordPress plugin .
You can install the plugin through simple steps in your WordPress site’s control panel, by going to: Plugins << Add New, then typing the name of the plugin in the search box, then clicking Install Now as in the following screenshot in order:
After that, the plugin can be accessed through the WordPress control panel. You will find a tab: Simple Custom CSS and JS
Through this add-on, you can add Css code or Js code, as well as write HTML. In this case you will follow the following steps:
- Click on the Add Custom CSS tab
- Write your own CSS code
- Determine where to insert the code on your site
- Click on (Publish)
Another distinctive addition is the addition of the Gutenberg Blocks Library , which helps you modify some content components (integrated with the component editor ) so that you can modify the design of the components through easy settings. There are paid additions such as CSS Hero that helps you make the modification visually and then extract the code.
Add CSS via the template editor
You can also access the CSS files for your site by working in the template editor for the template you are using, through the WordPress control panel by going to: Template Editor , then you can work and modify the style.css file that contains all the CSS codes for your site.
Note : The changes you make here in the style.css file will be at the level of the entire site structure. For example, if you change the H1 tag, this change will be applied to your entire site, and we do not recommend this method for beginners
Adding CSS using website builders
Website building tools also provide you with the ability to add custom CSS code to your site through the built-in building tools, to make it easier for you to add some features such as specifying colors, height, font size, text location, and many others, through the visual editor provided by these tools.
For example, if you use Beaver Builder and build a page using the plugin’s build editor, you will find the editor like this:
You can now add the element you want to the page and control its settings. For example, we want to add a title to the page.
You can simply drag and drop the item onto the page, to open its settings. Where you can control the size, text shape, color, spacing between texts, add effects, and other things that previously required you to write CSS code or something else to modify, for example, the color or size.
You can also go to the (Style) tab, where you can change the color and font type, add a shadow to the text, and more
You can also go to the (Advanced) tab, where you can control margins, add effects, add a background or frame, and other options.
This is just an example, and almost all website building plugins allow you to customize the appearance of the page in this way.
In the end, it is not necessary to use all of the previous methods, of course, as each of them has its own advantages or disadvantages, but it is enough to choose what suits you according to the type of modification that you want. If you are already using a website building plugin, it is easier to take advantage of the features that it provides for you, and if you want to add simple code. To do only one function, the easiest is the first method through the template customization tool
