HOW TO ADD CUSTOM CSS TO YOUR WORDPRESS WEBSITE (4 EXPLORED METHODS)

There are so many web development services on the Internet that look more or less the same. The good news is that if you use WordPress, you can customize the appearance of your theme and customize it by adjusting its style sheets.

There are many ways to modify the CSS of your site. And in this post, we will show you four different ways to customize the CSS of your WordPress site: using the built-in theme customizer, editing the style.css file of your theme, using a plugin and secondary themes. We will also review the key benefits of each approach so you can decide which method to use.

When you have finished reading this publication, you will be in a better position to customize your site without worrying about breaking it.

Let's start.

CSS AND HOW IT WORKS

Before you can begin to customize your WordPress theme, let's review some basic CSS concepts. Cascading style sheets (CSS) is a design language that controls how the corresponding HTML elements are displayed on the screen.

CSS controls things like text color, font styles, background colors, border thickness, margins, etc., and makes web pages look presentable. The first website created never has any CSS, it is purely HTML.

The cascading part in cascading style sheets allows web designers to make global changes to their websites simply by changing their CSS. Style sheets have ranking. Changes made to the highest ranking style sheets override all style sheets that have a lower rating. And it is thanks to this feature that you can create a separate style sheet in your child's theme that affects the appearance of your websites. In a few words, it allows you to update a CSS file without editing the original style sheet of the theme.

HOW TO IDENTIFY A CSS SELECTOR

CSS allows you to apply styles to the HTML that defines the structure of the web page. The first step is to decide what part of your topic you want to modify. Once you have done that, you will have to find the CSS selector corresponding to that particular element. Popular web browsers allow you to identify the selectors and CSS declarations of a page element using an inspection tool.

Here is how you can find the CSS selector of an element using Chrome:

Step 1: Right-click on the item of the page you want to modify and select Inspect item from the drop-down menu that appears. (If you are using Firefox, highlight a specific part of the page, right click on it and then select Inspect item from the list that appears).

Step 2: You should see two split screens appear in your browser. On the right, you will see the design information that gives you information about the HTML and CSS of the web page. And on the left, you can preview the web page.

Step 3: You will see that the CSS selector of the page element appears first in the list. Copy it to your clipboard.

By default, CSS styles for a theme are stored in the style.css file. One way to add custom CSS to your WordPress website is to use a text editor to open the style.css file of your theme, modify it and then use an FTP client to upload it to the directory of your theme.

If that sounds complicated or if you do not have an FTP client configured to access the files on your site, then you should not worry. In the next section, we'll look at four (easier) ways to add custom CSS to your WordPress site.

HOW TO PERSONALIZE THE WEB SITE OF WORDPRESS WITH CSS

Now that you understand the basics of CSS, let's look at some of the ways you can add custom CSS to your WordPress website. We will demonstrate it using the default theme of Twenty Seventeen.

METHOD 1: WORDPRESS THEME CUSTOMIZER

The WordPress theme customizer is the easiest (and fastest) way to modify the CSS of your website. Its interface what you see is what you get (WYSIWYG) allows you to alter the configuration of the theme, customize colors, menus, widgets, etc. You can also add custom CSS code with the theme customizer. That is how:

To access the WordPress theme customizer, go to Appearance> Customize from the WordPress admin panel. It will redirect you to the customizer interface, with the customizer menu on the left and the website preview on the right. From there, click on the additional CSS menu item.

A text box will appear where you can enter your custom CSS code. So, for example, if you come across a piece of code on the Internet and say, "Just add it to your website," then this is where it would go. The good thing about this customizer is that you can preview the modifications you make. If you are satisfied with the appearance of your site after modifying it, click on the Save and Publish button at the top of the screen to save the changes.

Some free and premium WordPress themes come with their own integrated theme customizers. Although most of them work in the same way, the WordPress theme customizer offers you a live preview of how CSS modifications will look on your site's interface.

The key benefits of using the WordPress customizer to add custom CSS to your website is that it is easy to access and you do not have to install an add-on. The custom code you add here will not be deleted or overwritten when you update your theme.

METHOD 2: ARCHIVE OF STYLE.CSS OF THE ACTIVE SUBJECT

You can access the style.css file of your theme directly from the back-end of your WordPress site by navigating to Appearance> Editor from the sidebar menu. You will be redirected to the Edit Themes screen.

On the right side of the screen, you will see a list of theme files. One of the files must be the style sheets file (style.css). And if you click on it, it will open in the code editor. You can edit this file directly from the code editor to make style changes to the active theme of your website.

If you add a custom CSS code directly to the style.css file of your active theme, you can see your existing CSS code. This makes it easy to see if you need to add a new code snippet of your own or just modify the existing code.

METHOD 3: PLUGINS CSS

If, for some reason, your active theme is not compatible with the additional CSS option or if it is difficult to track a custom CSS code, you can always use a complement solution. In fact, using a plugin is the most convenient way to edit the CSS of your theme.

One of the main advantages of using a plug-in is that changes you make to a topic will not be undone if you update it. This is because theme files and add-in files are stored separately. Here, I'll show you how to use the simple custom CSS add-on to add custom CSS to your WordPress website.

From the WordPress panel, navigate to Add-ons> Add new to search and install the simple custom CSS add-on.

Once the plugin is installed and activated on your website, go to Appearance> Custom CSS from the WordPress panel. You will see a simple screen with a text area where you can add custom CSS code snippets. Enter the CSS code and click on the Update Custom CSS button to save the changes.

If you plan to keep the changes you make in your site's CSS even after switching to a new topic, then using a plug-in is the best option for you. It gives you the flexibility to apply the same changes to a new theme with minor modifications.

METHOD 4: THEMES OF CHILDREN

If you download a topic in which you want to make changes, always do so through a secondary theme instead of editing the main theme. Why? Because if you do not, you will lose any CSS customization that you do each time the theme developer launches an update for it.

If you still do not have a children's theme, we recommend that you check this publication on How to create a child theme in WordPress (and why you should do it).

To edit the style.css file of the secondary theme, go to Appearance> Editor from the WordPress panel. Once you're in the Edit Topics screen, you'll see a list of files on the right side of the screen. Next, select the corresponding secondary theme of your theme in the Select theme to edit menu: and click on the Select button to update the list of Templates.

Finally, click on the style.css file of your child's theme and it will open in the code editor on the left.

You can add custom CSS code to the style.css file of your child theme directly from here. If you intend to use a specific theme for a long time, you should always activate your secondary theme on your WordPress website.

Adding custom CSS to a secondary theme makes it easy to track all the CSS you've added to your theme. And if you ever need to install your theme on a temporary website, you can simply download and install the main theme and the secondary theme while retaining the custom CSS that you added.