How to use Custom CSS in WordPress

CSS, or cascading style sheet, files are used by web browsers to determine how your page looks. Everything from color, to fonts, to margins, to images can be dictated by a CSS file. And CSS is a relatively simple skill to learn.

So let’s say you want to customize the CSS in your WordPress site. How? Where do you start?

style.css

The first place you might want to start is by directly editing the style.css file in your theme folder. By WordPress standards every theme must have a CSS file named style.css in the theme folder. It’s how WordPress gets basic information about the theme.

For this you’ve got two options, or maybe just one depending on how your server is set up.

Theme editor in Appearance menu

Theme editor in the Appearance menu

The first, and probably the easiest would be to use the built in theme editor. This is also the one that’s dependent on how your server is set up so it may not work for everyone.

To start click on the Appearance menu and then on the Editor link. Take a look at the screenshot to the right.

If you don’t see an Editor choice it could be that you don’t have permission or your server isn’t going to allow you to edit the files through the WordPress interface. If that’s the case you’ll have to skip down to the section on using an FTP program or one of the other options.

When you click on the Editor link you should see a screen similar to the following.

Theme editor

Theme editor with the style.css file from Twenty Twelve loaded

From here you can edit the style.css file. Be sure that you leave the header – everything at the top from */ to */. The header is how WordPress knows that this style.css file is part of a theme and the information about the theme.

On the far right you can also edit any of the other theme files, although unless you’re very comfortable with PHP I wouldn’t suggest editing the other theme files this way. If you mess up the CSS file your site just won’t look right. If you mess up one of the PHP files it can break your site, and you may not even be able to get into the admin interface to fix it.

There’s also a drop down menu where you can pick which theme you’re editing.

Advantages

  • Simplicity – it’s built in to WordPress

Disadvantages

  • May not work for you depending on how your server is set up
  • Editor is not built specifically for editing CSS. For example, tabs don’t do what you’d expect

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>