There are so many sites out there that look alike. And for this reason, selecting a theme that is both unique and feature-rich is difficult. WordPress’ flexible customization options allow you to modify a theme’s appearance and make it unique simply by tweaking its CSS.
That said, getting started with CSS customization and modification can be a daunting task – especially if you shy away from code. Thankfully, WordPress makes CSS modifications profoundly simple.
In this article, we’ll take a look at some different ways you can go about modifying your WordPress website’s CSS – using the default theme customizer, plugins, and child themes. Next, we’ll run the rule over three of the best, free CSS plugins out there. Finally, we’ll wrap up by introducing some bonus tools that can help you customize your theme’s CSS.
But before we begin, let’s go over some CSS basics.
What Do I Need to Know About Adding CSS to WordPress?
There are a few things you need to get to grips with before you can start styling your WordPress theme. Cascading Style Sheets (CSS) describes how corresponding HTML elements are to be displayed on the screen.
Simply put, stylesheets are sets of rules that define the style options (such as the font, color, background, images, etc.) for different HTML elements that are displayed on your web page. The cascading part in CSS allows web designers to style multiple stylesheets by adding (or replacing) styles from lower- to higher-ranked style sheets. This enables web designers to make changes to a CSS file without editing the original stylesheet that came with the theme.
Identifying a CSS Selector
We already know that CSS enables users to separate the web page’s structure from its visual elements. The CSS file contains a set of rules that the web browser reads and executes to style the web page’s HTML.
Elements that describe these rules are called selectors and the styles that apply to them are called declarations. In order to modify a page element’s CSS, you’ll first have to identify its CSS selector. Once you’ve got its class (.class-name) or ID (#id) using Chrome’s Inspect tool (or something similar), you can use a CSS editor to modify its style.
Here’s how you can identify a CSS selector using Chrome’s Inspect tool:
Open up a web page in the Google Chrome web browser. Find the page element you want to inspect, right-click on it, and then click Inspect. For instance, if you wanted to inspect the View our themes button on our homepage, it would look something like this:
Your screen should split up into two sections – on the left, you can preview the web page and on the right is the inspection screen that gives you a detailed look at the web page’s HTML and CSS.
The most dominant selector will be displayed first in the list. In our example, it’s the selector .btn-pink.
WordPress stores the CSS for a theme in the style.css file. This file contains styling instructions for your entire theme. You can edit your site’s WordPress theme by opening up its style.css file in a text editor, making the necessary modifications, and then re-uploading it to your website using an FTP client.
If you’re anything like me then you’re probably thinking: There’s got to be an easier way! The good news is that there are three easier ways which we’ll cover in the following section.
How Do I Customize My WordPress Website With CSS?
Now that you have a basic understanding of CSS and how to identify a page element’s CSS selector, let’s take a look at some different ways you can customize your WordPress theme’s CSS – the right way!
Method 1: Using the Theme Customizer
The easiest way to customize your WordPress website’s CSS is by using the built-in theme customizer. It lets you add custom CSS code and preview the modifications live before you save changes. Here’s how:
Start off by navigating to Appearance > Customize from the WordPress dashboard.
You should be redirected to your site’s front-end with the theme customizer menu displayed on the left side of the screen. From there, click on the Additional CSS menu item.
Next, you’ll see a textbox, where you can enter your own CSS code. All you have to do is input the custom CSS code snippets there and you’ll be able to live preview the modifications. If everything looks good, go ahead and click the Save & Publish button at the top of the screen to save changes.
Although WordPress comes with a built-in theme customizer, some premium themes have their own built-in theme customizers that allow users to add custom CSS code snippets through the main Theme Options screen.
This is the fastest (and easiest) way to modify your WordPress theme’s CSS. However, if your theme doesn’t have the Additional CSS option enabled or if you haven’t updated your WordPress version (though you definitely should!), then you can always use a plugin instead.
Method 2: Using a Plugin
If you are using an older version of WordPress or if your currently active theme doesn’t support additional CSS, then you can use a plugin to add custom CSS to it. WordPress CSS plugins are designed to take the heavy lifting out of CSS modifications. In the following section, we’ll go over three great, free WordPress CSS plugins. For the purpose of this tutorial, we’ll demonstrate using the Simple Custom CSS plugin.
Head over to Plugins > Add New from the WordPress dashboard to install the Simple Custom CSS plugin.
Once it’s installed and activated, navigate to Appearance > Custom CSS from the WordPress dashboard. You’ll see a simple screen with a text area where you can add custom CSS code snippets. It should look something like this:
Once you’re done entering the CSS code, be sure to click the Update Custom CSS button to save changes.
If you plan on keeping these changes even after switching over to a new theme, then using a plugin is the best option for you. You can apply the same changes to a new theme with minor tweaks and turns. However, if you intend to use the same theme then you’ll need to future-proof its CSS modifications by using a child theme.
Method 3: Using Child Themes
Many themes – especially premium ones – come with child themes right out of the box. A child theme enables the user to add custom CSS without making any changes to the parent theme’s style.css file. If you don’t use a child theme then you will lose any CSS modifications that you might have made whenever a new update for the theme rolls out.
You can edit the child theme’s style.css file by heading over to Appearance > Editor from the WordPress dashboard. You will be redirected to the Edit Themes screen, and from there you can see a list of files on the right side of the screen.
From the Select theme to edit: drop-down menu, select your theme’s corresponding child theme and click the Select button to update the Templates section. Next, click on your child themes’s style.css file to open it up in the text area to the left.
You can modify the existing CSS code or add custom CSS code to your child theme’s style.css file directly from here. It is a good idea to use a child theme if you intend to use a particular theme for a long time.
Which Free CSS Plugins and Tools Can I Use?
The key benefit of using a plugin to customize your WordPress website with CSS is that the changes you make will be saved even if you decide to switch themes later on. This makes it easy for web designers to add CSS to their WordPress site without worrying about keeping track of each modification.
Simple Custom CSS
Simple Custom CSS is high-rated WordPress CSS plugin that overrides plugin and theme default styles to implement your custom CSS code. Once you have the plugin activated, you can begin modifying CSS code right away without having to configure its settings first. The interface is really simple and based on the default WordPress user interface layout making it user-friendly.
Key Features:
- Comes with a built-in code syntax highlighter.
- No lengthy configuration settings to mess around with.
- Incredibly lightweight; doesn’t impact site performance.
- Simple, user-friendly interface.
SiteOrigin CSS
If you are looking for a simple yet powerful WordPress CSS editor then SiteOrigin CSS is hard to beat. Its visual controls are intuitive and allow you to live preview the modifications in real-time. In addition to this, a number of CSS modifications are built right into the system (for instance, text formatting) allowing you to implement them by simply pointing and clicking.
Key Features:
- Ships with a powerful element inspector that helps you find the correct CSS selector.
- Allows you to preview changes in real-time.
- Works seamlessly with a wide-range of themes.
- Comes with code autocompletion functionality.
TJ Custom CSS
The TJ Custom CSS plugin works by enabling a custom CSS manager on your WordPress site. It’s designed to automatically override existing theme and plugin styles when you add custom CSS code snippets to it. The plugin allows you to add custom CSS code to a text area or in a customizer if you’d prefer to live preview it before saving changes.
Key Features:
- Designed as an alternative to using child themes for customization.
- Does not require any configuration settings.
- Incredibly intuitive and easy to use.
- Allows users to live preview changes before saving them.
Bonus: Nimbus Themes’ Code Generators
By using the plugins we listed above you’ll be able to add custom CSS code snippets to your WordPress site. But where do you get the CSS code from?
We’ve put together some code snippet generators that will help you generate custom CSS code for your WordPress themes. Let’s take a look at some of them:
- Custom CSS for List Styles. The List Styles tool allows you to customize your theme’s bulleted or ordered list styles. You can pick from 24 different list styles.
- Custom CSS for Cursors. This code snippet generator lets you style the cursors on your website. We’ve got 37 different cursor types for you to try out.
- Custom CSS for Columns. If you’d like to add CSS-based columns to your web pages then look no further! All you have to do is enter the CSS selector and tell it how many columns you’d like and the tool will do the rest.
- Custom CSS for Text. Styling text on your website using CSS doesn’t have to be difficult. You can use this code snippet generator to define all kinds of text formatting rules and simply copy-paste the generated code into your theme’s style.css file.
Conclusion
Once you get the hang of it, modifying WordPress themes to give your site a unique look and feel is super fun. We covered some of the best ways to customize your WordPress website with CSS. Hopefully, you’re in a good position now to take things further yourself.
Let’s quickly recap the main ways you can add custom CSS code to your site once you’ve identified the CSS selector:
- Use the built-in theme customizer to add additional CSS code.
- Opt for a plugin solution to add custom CSS code to your website.
- Go with a child theme to make CSS modifications if you intend on using a theme for some time.
Which plugins and tools do you use to customize your WordPress website with CSS? Let us know by commenting below!
Epicurean Theme