There is more than one way to add custom CSS code to a WordPress blog.

Today, I will explain the strengths and weaknesses of the two different methods that I propose to you, so that you are able to choose the one that suits you best.

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.

How to find the items you want to customize

Once you have isolated the part of your WordPress theme you want to change (for example the title of an article), you will need to determine CSS properties applied to it so that you can make the appropriate changes. Fortunately, this process is not complicated.

The CSS uses selectors to determine which elements will experience the different specific changes. Usually, this is done by specifying a " class "Of an element (or DOM element). However, CSS can also be used to define the layout of an entire element (for example, the tag " ") or using the identifier of the tag.

Fortunately, popular browsers allow us to see the different selectors and declarations that are applied to page elements with just a few clicks. On Google Chrome, for example, you just need to highlight a specific part of the document and then right click, like in the following example.

Clicking on " Inspect element In the drop-down menu that appears, you will see the HTML code of the page in a new window with the inspected item highlighted in the window on the right (Or below). You can see an example below.

The texts of these elements (or attributes) Highlighted in red show you the different specific styles applicable to the item that you had highlighted by inspecting the code.

Read also: How to add a drop-down menu with CSS styles in your Visual Editor

For example, the element " font-size Tells you that the font displayed in the highlighted item is sized to 13 pixels. The descriptors are surrounded by braces and preceded by selectors. The name of the corresponding style sheet file is displayed just to the right of the selectors.

Once you have this information in mind, changing the style becomes easy. For example, if you want to change the font from 13px to 14px, you simply look for your style sheet file, the selector that corresponds to the one of the highlighted item. It is generally in this form: (« # .block-plugin-content information"). You can then modify the different values ​​of the attributes.

You can do the same thing on Firefox, just highlight a specific part of the page, right-click on the item, then select " Inspect element In the menu that appears.

How WordPress and CSS work together

It is a fact that the WordPress themes are created differently. So keep in mind that your WordPress theme might not comply 100% with what you read in the following sections.

That said, it is more than likely that the CSS used on your WordPress blog is located in a file called " style.css " This is the common name for a style sheet for any type of website, not just WordPress.

See also: How to change the size of Gravatar images on WordPress

Now it's time to go through the different editing processes.

Method # 1: Editing the Style File of Your WordPress Theme

There are two ways to access your theme's style.css file.

The first is to do it from your WordPress dashboard. On the left side menu, select the menu " Appearence "And then" Publisher ».

Once you are on the editor page, you will see a list of files on a vertical bar on the right side of the page. Scroll through the list of files. You will see a file named " Style.css style sheet " at the bottom of the page.

If you click on the name of this file, it will be loaded and displayed in the editor in the middle. You can use this screen to edit the file.

The other way to find the stylesheet is to browse through your hosting provider's operating system and locate the file in the WordPress theme (using an FTP client). The exact location will vary depending on your hosting provider. In the example shown below, the website name (In our case thecare) Is a folder under the public_html folder.

Since WordPress is installed, you can see the wp-content folder in "thecare". The wp-content subfolder is another folder called " wp-themes", which is where all the WordPress themes are installed.

From this website uses a theme called " Newsletter », The style file« style.css Is located in the folder " Parent Newsletter ».

Method # 2: Using a plugin to modify CSS

Perhaps the most convenient way to edit the CSS of your WordPress blog is the use of a plugin.

One of the main advantages of using a plugin is similar to that of child themes. Yes you update the WordPress theme, your changes will not be overwritten, as they will be stored separately and not among the theme files. The other advantage, of course, is that you don't have to create a child theme.

Here are some premium plugins that you can also use to modify the CSS code of your WordPress theme :

1. Yellow Pencil: Visual CSS Style Editor

Yellow Pencil is a visual style editor that you can use with any theme to personalize your website in minutes (fonts, colors, animations and more…).

Ce WordPress Plugin premium will create CSS styles by background while you play with the colors as if it were a game. It was designed for beginners as well as experienced users.

Discover also our 5 plugins WordPress to show notifications

No coding knowledge is required. However, the WordPress Plugin has a good CSS editor for those who like to code. You can code live with this editor and customize your CSS.

Download | Demo | Web hosting

2. Custom JS and CSS for Gutenberg

Le WordPress Plugin premium Custom JS and CSS for Gutenberg will allow you to add an unlimited number of custom styles to the WYSIWYG editor for your WordPress posts and pages. It is fully compatible with the Gutenberg version of WordPress.

You can simply create a new style with an easy-to-use CSS editor. This WordPress plugin extends the features of custom fields of your website and gives you the ability to modify your custom fields with a dynamic and powerful personalization module. and the functionality of real-time preview of this WordPress plugin makes it very comfortable and user-friendly.

Download | Demo | Web hosting

3. SiteOrigin CSS

It is by far the WordPress plugin that offers the most options in this list. The most amazing thing about the latter is that it is free. This WordPress plugin is the only one that cannot be found in the customizer.

After installing and activating the plugin, you need to navigate to the following location “ Appearance> Custom CSS To access the CSS edition of the plugin. On this page, you can see a text editor that does not offer live preview. 

Read also our article on 10 WordPress plugins to boost sales of your website

To access the latter, you must click on one of the two buttons that appear on the left, just above the editor. The button with an eye icon will bring up a visual CSS code editor that enthusiasts will appreciate. The icon with the extension arrows will display a text editor which will imply a mastery of CSS codes.

Download | Demo | Web hosting

4. Simple Custom CSS

Simple Custom CSS is one of the most popular plugins.

Discover also our How to make your blog fast: managing CSS and JS files.

It has been installed over 100 times and has received a five star rating.

Download | Demo | Web hosting

5. WP Add Custom CSS

WP Add Custom CSS is a plugin that allows you to change the layout of a WordPress blog whole or just individual articles. This is a great option if you are looking for flexibility in customizing items.

The plugin has been downloaded over 10.000 times and currently enjoys a 4,3 star rating.

Download | Demo | Web hosting

6. Theme Junkie Custom CSS

If you are looking for a solution that offers a live preview of your changes, you may consider using Theme Junkie Custom CSS. 

This solution adds a custom CSS manager to your dashboard, where you can add your own styles. It also offers an alternative to using a child theme.

Download | Demo | Web hosting

Other recommended resources

We also invite you to consult the resources below to go further in the grip and control of your website and blog.

• 10 WordPress plugins sharing on social networks
• How to Display Custom Fields Out of Loop on WordPress
• 5 WordPress plugins to monetize your blog with ads
• How to protect your blog from content scrapers

Conclusion

Here! That's it for this tutorial, I hope you will manage to add custom CSS code to your WordPress blog in 2 methods, If you have any Comments or suggestions, do not hesitate to tell us in the section reserved for these.

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.

If you liked this article, ndo not hesitate to share on your favorite social networks. 

...