Your webpage is bland and tasteless without some CSS to spice it up.
CSS – Cascading Style Sheet is a front-end programming language dealing exclusively with stylistic presentation of a web document. Unless you’re aiming for bland and tasteless, you’re going to have to learn it.
Now WordPress is amazing, but even a WordPress website will need to be styled to your/client’s specification (because looks are everything on an Attention Deficit web). WordPress themes store their CSS in a theme file conveniently named style.css. This is where you’ll focus most of your efforts to edit the colors/fonts/spacing/effects/etc.
And since it’s WordPress, there are more than one ways to go about doing anything. In this post, we will see how you can add custom CSS to your own or a preexisting WordPress theme.
1. Editing Theme file: style.css
You can get to this file in two ways.
The first (and simpler) way to get to it is through the WordPress admin screen. In the left-hand navigation bar,
• Go to Appearance >> Editor.
• You’ll be brought to a screen listing all your theme files on the right side. Scroll down until you see style.css. Click it.
• This will open the style.css file on your screen, ready for edits. You can customize the theme’s CSS file here (Note: It’s recommended to follow Method 2., we’ll get to that in a moment).
Another way to access stye.css is to go through your WordPress installation directory and locate the file manually in the wp-content/themes folder. Keep in mind that the location (and the method to reach it) will differ based on your web host.
2. Creating a Child Theme
Method #2 is so much better for general health and well being of your website (and longevity of any changes you make in your CSS).
Recall that a WordPress theme isn’t just colors and fonts but a collection of functionalities and layout. The CSS is quite literally, the icing on that cake. If you are making changes in a preexisting WordPress theme’s CSS, keep in mind that those changes will be overwritten any time you upgrade your theme to a newer version. To prevent that, you create a child theme and add your custom CSS to it instead of the original (read: parent) theme.
Note that WordPress theme frameworks (like Genesis by StudioPress) work this way. The framework/parent-theme works as functional scaffolding, and the child theme adds the aesthetics (and some functions).
You can create a WordPress child theme in minutes, as detailed in this practical guide.
3. Via Plugin
What can’t you do with a WordPress plugin?
Using a plugin to add custom CSS is another way to ensure that your changes stay, regardless of how many times you update your theme. It’s like a child theme, but without the extra effort of having to create one.
There are some great plugins (What else do you expect from WordPress?) to let you add custom CSS, some of the best are listed here:
• Simple Custom CSS
Simple Custom CSS is the most popular Custom CSS plugin on WordPress. With over 200,000+ installs, frequent updates, syntax highlighter, Multisite admin access, and feather-light weight, the plugin absolutely deserves its overall user rating of 4.9/5
• WP Add Custom CSS
WP Add Custom CSS gives your CSS tactical flexibility, in that it lets you override presentation styles for select pages and posts (along with the usual CSS override for entire site, of course). With over 30,000 installs and consistent updates, the plugin is definitely trustworthy.
• Theme Junkie Custom CSS
Theme Junkie Custom CSS will let you review customizations in real time. The plugin makes a nice addition to your admin screen (in the form of a Custom CSS Manager) under Appearance >> Custom CSS, where you can add your custom CSS directly. It also creates child themes, saving you some more time and effort along the way.
This is another well-rounded plugin in terms of updates, active installs, general user-rating, and ease of usage.
Endnote
Any WordPress theme developer you talk to will give you only this advice for CSS customization: Create child themes and learn everything about WordPress’ style.css. It’s also a good idea to pay special attention to accessibility, but that’s your call to make.
Remember to forego elemental (inline) CSS, go with proper style sheets instead. They are easier to compress and minify later, and your website will perform better for it.
