Adding Custom CSS to WordPress

WordPress is heavily reliant on CSS stylesheets. Making simple CSS changes to a WordPress website is one of the first things that beginners want to do.  Luckily it’s super easy to add custom CSS styles to your site.

There are lots of different methods and anyone, I mean anyone can do it. I showed my 8 year old niece how to do it and she doesn’t even understand the difference between an iPad and an iPod, or at least she thinks the terms are interchangeable. Today we have a quick guide on adding custom CSS to your WordPress website.

CSS stands for Cascading Stylesheet. When you hear someone mention a “stylesheet,” they are referring to CSS code. You can use CSS to customize a webpage. This includes things like:

• Hiding text
• Adding borders
• Changing the appearance of your text (font-size, color etc.)
• Wrapping text around a picture
• Changing the background size
• Optimizing the display for specific screen sizes (mobile phones, tablets)
• And lots more

CSS allows to get your website pixel perfect. To implement a CSS style rule, all you need to know how to do is find the CSS selector. After that you can add your style rules however you see fit as long as they are valid. This an easiest way to make simple adjustments to a WordPress theme. This method can be necessary at times when you have pages with a complex structure that has multiple nests containing the element you want to change.

Many times people using themes aren’t expert coders. They just want to make a simple change so they can use their site. If you have the time, you should get to know HTML and CSS. It’s fun and straightforward. Get started by observing code and learning best practices for HTML. From there you can move into CSS and learn about structure, syntax and styles. For now we are going to show you a quick and dirty way to solve some simple problems.

CSS and WordPress

Every WordPress theme is different. The code doesn’t always follow best practices, and things may not be organized quite like the examples in today’s post. But most often, you will be able to find your CSS stylesheets in a files named something like style.css, base.css, or custom.css.

The style.css file in your theme folder will specify instructions for styles. This post isn’t an intro to CSS, so if you are confused at this point or want more information, you can visit the CSS section at the W3Schools website. Now that we’ve got some basics covered, let’s get into it and play a little CSS detective.

Finding CSS selectors with your web browser

Web browsers have built in developer tools to help you view the code of your webpages directly in the browser. You can even make style changes with the developer tools to preview style rules right in your browser. This allows you to instantly see how the rule affects your site’s appearance in the browser. Here’s a quick and dirty guide to using a browser to find the CSS selector you are looking for in Chrome, Firefox and Internet Explorer.

Chrome – From the dropdown menu located in the top right corner of your browser, you can navigate to More Tools > Developer Tools. The shortcut is alt+ctrl+i on PC and alt+command+i on a Mac. Alternatively you can right click and choose inspect to highlight a single element.

Firefox – Firefox has a native inspector, but I like to use Firebug. Download the Firebug extension and open the developer tools by pressing F12 on a PC. You can also navigate to Tools > Web Developer > Firebug > Open Firebug on a Mac. You can also click on the Firebug Icon in the top right corner or right click and choose Inspect Element With Firebug.

Internet Explorer – To access Internet Explorer’s developer tools, press F12. You can also right-click and choose Inspect Element to view a specific part area of your page.

Finding the elements you want to customize in your browser

Once you found something you want to customize on your theme, you will have to play CSS detective and find it. Then you will have to figure out which CSS properties you want to add, edit or remove to make the changes you want. It’s very fast and simple.

CSS uses selectors to determine which design declarations are applied to a specific area of your website. Most of the time you will see a class for your element. But CSS can also be applied inline to define the layout of an element based on its ID.

If you aren’t the best CSS detective don’t worry. Browsers are very powerful these days and they enable you to clearly see CSS selectors and the styles applied to them. You can even make changes in the browser to see how they will look. Below we show you two ways to find CSS selectors in Firefox and Chrome. After that we’ll show you how customize your site using the selector.

Adding custom CSS to WordPress

Okay let’s see a live example. I have a site created with the Enfold theme and there are some small changes I need to make it look pixel perfect. The main navigation menu is set to display a background color anytime the cursor hovers over it; but there is a slight problem. The search menu item is not centered.

Watch the video below to see how to quickly fix this. I am using chrome and editing the style.css of my child theme to implement the CSS rules. If you want to know more about child themes, see our post on Child Theme in WordPressWordPress.

You can also use a plugin. In Enfold’s theme options panel, they have a quick CSS box that works much the way plugins do, by appending the CSS code you enter to your theme’s style.css file. Below is an example of using the quick CSS box to add a border. I also make changes directly in the browser to preview your style rules.

It should also be mentioned that themes like Enfold also have a custom CSS file that you can edit and upload via FTP. You can also make use of CSS media queries to can specify style rules for mobile, desktop or globally.

Use a plugin to add custom CSS in WordPress

I suggest you get to know HTML and CSS if you plan on doing any frontend development to your WordPress website. But, if you aren’t comfortable coding you can always use a plugin like Visual Composer or Cornerstone to get the job done. There are also lots of well-written custom CSS plugins for WordPress.

Online you can find plenty of affordable or free tutorials and classes to help you become an expert. But you can always opt to use a plugin instead of messing with the child theme style.css. This is better for many beginners because there are lots of things that can go wrong if you aren’t careful. Below are some free CSS plugins you can add to your site to make things easier.

Simple CSS

If you want to add CSS to your site, this simple plugin works well. It offers you an admin editor from the dashboard as well as a live CSS editor in the customizer. When you edit from the customizer you can preview your changes live so you can easily add custom CSS. It’s also got a meta box to apply changes to a specific post or page.

My Custom CSS

This plugin takes CSS rules that you add and appends it to your stylesheet. It’s powered by Ajax Cloud9 and performs well. It has multiple themes (skins) as well as a backup feature.

Royal Custom CSS for Page and Post

This is a really cool CSS plugin because it gives you a custom CSS option for every post and page on your website. It’s easy to use, lightweight and works right out of the box. A custom CSS box will appear at the bottom of each page or post where you can add your styles.

WP Add Custom CSS

WP Add Custom CSS lets you add CSS to your entire site or to specific posts/pages. It works by adding a meta box under the post or page sections as well an area in the admin panel to add code to the entire site. The rules will override the default stylesheets used by your theme and plugins. The interface leaves something to be desired, but it works nevertheless.

Wrapping Up

Hopefully this article helps if you are looking to make simple CSS changes on your WordPress website. We didn’t touch upon every method here, just enough to get you going. We appreciate your feedback. Let us know in the comment section if there is anything we can do to make posts like these better. Also, feel free to share your favorite methods or plugins to add CSS to WordPress.