How to Use Custom CSS on Your Blog

On
CSS code in a code editorIf you're running a WordPress blog, at times, you may have felt the need to customize the look and feel of your existing template. One of the best ways to do that is through custom CSS code. But, general users often do the mistake to directly edit the default theme CSS file which is overwritten on subsequent theme updates. An ideal solution to this problem is to keep your custom CSS code out of the theme files so that the custom styles are not overridden by newer versions of the theme. There are several flexible and good plugins to help you easily add custom CSS code to your WordPress site without any hassle. Needless to say, one must possess working knowledge of CSS to use these handy plugins. I often use such kind of plugins for my clients who're technically sound and prefer to make minor changes by themselves. Make sure you always make changes to a demo site before applying them on a live site. The good thing about these plugins is that you can remove your custom CSS code without affecting the core design code.

CSS code in a code editor

If your existing theme or design framework supports addition of custom CSS, do not install a plugin for the same. Otherwise, feel free to pick one of the plugins listed below to add custom CSS.

Read Also:
How to Ensure Your CSS Code Is Readable

If you're new to CSS, learning it is highly recommended as it gives you the power to make powerful design changes on the frontend. Let's see and analyze these custom CSS pplugins for WordPress.

Simple custom CSS plugin for WordPress blogs Simple Custom CSS - This first plugin in the list is one of my preferred plugins to add custom CSS functionality on a site powered by WordPress. As the name implies, this handy plugin easily adds the capability to customize your existing design through custom CSS code. All the code is syntax highlighted for better readability. It can also be used on a multisite installation without any issues. The interface is simple and obvious with a blazingly fast performance. It uses an optimized and efficient method to add custom CSS code to avoid visible page download latency. Do once use this plugin on your blog.

WP Add Custom CSS extension WP Add Custom CSS - This powerful plugin lets you add custom CSS both for the whole site and for posts or pages of your choice. While adding custom CSS code for specific posts or pages, a separate code box is provided on the editing screen so that one can compose and code simultaneously. This plugin is highly recommended for site owners looking to customize the look and feel of select pages. It is quite a popular plugin in its category and is actively updated by the developer. Deactivating this plugin doesn't affect the default theme styles at all. This plugin doesn't need any kind of post-installation configuration.

Theme Junkie Custom CSS for easy customization Theme Junkie Custom CSS - This is another custom CSS plugin with some impressive features to easily help you customize the design of your site. It has a powerful preview feature which allows you to inspect the changes made by custom CSS before you apply them on the site. This literally eliminates any need to use a demo site while working with custom CSS code. It has a helpful uninstall process to facilitate easy revert of changes made by the custom code. It also supports child theme alternative instead of just using custom CSS code. All the custom CSS code is syntax highlighted for a better experience.

Custom CSS - Whole Site and Per Post plugin Custom CSS - Whole Site and Per Post - Like every successful custom CSS plugin, this one also allows site-wide and post specific CSS changes. Its CSS editor uses line numbering for better code maintenance. It also allows you to add custom CSS in two different ways. Either you can use external stylesheets or you can directly insert your own CSS code from within the dashboard. The interface is very user-friendly and even beginners can use it instantly after plugin activation. This lightweight CSS plugin works seamlessly with all themes and in every kind of web hosting environment without any issues.

Custom CSS plugin from AccessPress AccessPress Custom CSS - This popular plugin includes a powerful and flexible code editor to easily write and modify the custom code. The editor also supports syntax highlighting for better editing experience. This handy plugin's developer actively provides support to its users' through different channels like email, forum, and online chat. This highly optimized plugin doesn't slow down your site due to custom CSS addition making it one of the best plugins included in this list. I'm using this plugin on one of the niche sites for a company and their web administrators love its simplicity and power.

Plugin for adding new global CSS stylesheets Global CSS by Joddit - This impressive plugin allows you to easily add and manage custom CSS stylesheets from within the dashboard. Through it, you can add an unlimited number of custom stylesheets. The plugin uses CodeMirror editor for managing the CSS code with all the advanced and user-friendly features one needs to write and edit the code. The editor works perfectly both on desktops and on smartphones making it ideal for adding custom CSS code on the go too. I like the color scheme activated for the editor used in this plugin. The installation and plugin activation process is also dead simple.

CSS add-ons for WP administrators CSS Addons - This intuitive plugin allows you to add custom CSS code in an interesting way. Apart from the regular way to directly writing custom CSS code, it also allows you to write a library of small custom CSS snippets which can be applied whenever one needs them. You can name these ready-made snippets in a user-friendly format so that technically challenged users can also use them with ease. I'd prefer this one for clients who're not familiar with CSS yet want to apply simple changes on their own. This plugin works without any issues both on multisite and regular WordPress installations.

Personalize your WordPress blog with CSS customization WP Personalize - This versatile plugin not only allows you to add custom CSS, but also supports addition of JavaScript, HTML and PHP too. You can insert your custom code in header, footer or in the body of the web page. It works with multisite network too. This plugin is suited for technically sound web administrators who want to make significant changes in the site without affecting the core code. Its code editor is very user-friendly. WordPress sites running on a multisite configuration with different user groups can target individual sites in the network for CSS customizations. Do try out this CSS plugin.

Extension for simple custom CSS styling Very Simple Custom Style - As the name indicates, this simple yet useful plugin allows you to easily change your site's appearance through custom CSS code. The changes made through the CSS code inserted by this plugin affect the entire site including all pages and posts. In case, you want to revert the applied styles, simply delete those lines from the editor and save it again. It's also available in the Dutch language. In case, you want to contribute to getting this plugin to get translated into your preferred language, the developer actively accepts any such help. It's a user-friendly and a lightweight plugin for custom CSS.

Override theme CSS with Theme Companion plugin Theme Companion - While using this plugin, make sure you do not activate on a multisite WP site. It allows you to easily edit additional CSS stylesheets from within the dashboard. It's ideal for self-hosted WordPress blogs looking to easily modify their theme styles in a nondestructive manner. I've thoroughly tested this plugin on a local WordPress installation with 6 different themes and it worked seamlessly in a hassle-free manner. Justifying its name, it is really a perfect theme companion to help you customize your site design without any fear of breaking the original theme code. So, grab this plugin right now!