How to Modify WordPress CSS: The Easy Way

Most bloggers are pretty sharp. They know how to apply a theme to their site, customize it, and can generally figure out most things. One area I regularly see bloggers and website owners in general getting tripped on – is editing their CSS. CSS stands for Cascading Style Sheets, and is a standard method for determining how a website should look. CSS is not that hard, but I realize that not everyone gets a kick out of playing with the “nerd knobs” as us nerds call them – some people just want things to work. I get that. So with the spirit of those who just want a good looking site, I’ve created a single page to use as a cheat sheet to modify your blog.

One final point before we get started: you should always back up your site files before playing with them. I typically take a backup every couple of days anyway – it’s a good practice to follow, even if you know what you’re doing.

What problem does CSS solve?

Standard HTML pages were designed to contain one thing: the content of the page. For example:

<h1>This is the main heading</h1>
<p>This is a paragraph</p>

In the above HTML code, we have text, with our HTML tags defining what should be included in the text. This was fine for a while, until we began defining style elements in with the code, such as:

<h1><font color="red">This is a red main heading</h1>
<p><i>This is an italicized paragraph</i></p>

The problem this introduced was simple: the content and styles were intertwined, which made changing the style a huge pain. To add to that, each page would have to have the same styles applied to them and coded inside the HTML tags. This means a simple color change on all of your pages would require you going to each page and making the same change. Enter CSS.

CSS Basics

CSS introduced a new concept: the stylesheet. In a nutshell, the stylesheet is a text file which only specifies style elements. These can be things such as the placement of text/image on a page, the color and font of text, or how wide an element should be. For example, here’s an actual snippet of my stylesheet for this page.

#main {
 width: 69.2%;
}

This code specifies that the element named “main” will be a width of 69.2% of the total available space. This is specified in a stylesheet named “stylesheet.css” – and in the HTML code, we have this, which ties it together:

<section id="main" class="col-left">

If you’re following along – we have an HTML tag with id “main” – and in our stylesheet.css file, we’ve specified that whenever we see the id “main” – we’ll give that element a width of 69.2%. This means that on every page that references our stylesheet, we will apply this same style whenever we see the “main” selector. In short – editing a single stylesheet can change the entire look of our site. Much easier.

Further CSS Learning

I highly recommend going through the CSS Tutorial at W3Schools.com – it’s top notch. I would highly recommend at least going through the first few tutorial pages, which should only take a few minutes. It’s not required, though.

Getting your Tools Ready

The first point to make – is you ideally want to make all of your CSS edits in WordPress by navigating to Appearance -> Edit CSS (see screenshot below). This will help ensure that your changes persist if you upgrade or modify your theme. If you choose to edit your stylesheet directly (via the Appearance -> Editor, or FTP) – make sure to keep a backup of the file before any updates to your site, just in case.

How to Edit WordPress CSS

Once you know where to edit your CSS, you have to decide what changes to make. This is where an awesome tool comes into play: Firebug. Firebug is an extension to the Firefox browser, and allows you to view, edit, and craft your custom CSS easily (among other things). It’s worth noting that Firebug is no longer maintained, but you can download and install it still. An alternative which provides the same functionality, is the Firefox Developer Edition browser, which provides similar functionality, and then some. You can download firebug for free at Firebug. We’re going to continue with Firebug for this article since it still works great.

Making Changes with Firebug

The really cool thing about Firebug, is that it lets you preview CSS changes in a live environment. Once installed in Firefox, you simply browse to the page you want to alter the style on, and right click, and select “Inspect Element” – you’ll get a screen like the following once Firebug opens:

Firebug CSS WordPress

It’s worth mentioning now, that Firebug does a lot. We’re going to keep it simple. Let’s move the “Google” image all the way to the right of the screen. Bare in mind this is just a live preview, so we’re not actually changing anything. What we’re doing is using Firebug to find the code we need, then we’ll paste that into our “Edit CSS” screen in WordPress. Obviously I’m doing this on Google.com, but you’d do it on your WordPress site.

The first thing we need to do is to highlight the element we want to edit. The easiest way to do this is to expand all of the lines in Firebug with arrows next to them. Then, use your keyboard to arrow up until ONLY the element you want to modify is selected. In our case, we move until we see just the image selected:

Firebug CSS Editing

You’ll see in the right section of the screenshot above, we have the “Rules” tab highlighted. This shows us the active CSS code that is being used on this element. In our case, you’ll see that “element { padding-top: 109px; }” is defined. This determines the spacing between the image and the top of the page. Don’t take my word for it – click on the 109px, and use your keyboard arrows to move it up or down. You’ll see the Google image moving as you adjust the code.

Since we want to move the image to the right, we’ll need to add code that doesn’t exist. Specifically, we’re going to add a “padding-left” right below the “padding-top” line, and adjust it until it’s where want it to be. Here’s what I did:

You’ll notice that when you go to add the “padding-left” line – Firebug will auto-complete and show you other options. This is a nice way of finding out what other options there are. Here’s the result I got with the above code:

As you see, we got the desired result we were looking for. Now, we need to know specifically what CSS code to add to our WordPress code (again, you should be editing CSS on your own blog, obviously!). To get this code, we’re simply going to right click on our new code, and select “Copy Rule” – this will allow you to copy and paste your CSS code. It’s worth noting that this includes the original CSS as well as the new code, but that’s only because we added a line. In many cases, you can just modify the original code, copy it, and paste into wordpress. Here’s our new code that we would add to our site, if we wanted to modify the padding:

element {
 padding-top: 109px;
 padding-left: 1126px;
}

After pasting this code into our “Edit CSS” in WordPress, we’re done. You can repeat this process for many other style elements on your site. If you do find yourself stuck with not knowing the proper CSS code to use – check this W3Schools CSS tutorial out.

Hopefully this helps some bloggers out there play with their CSS and possibly save a few bucks instead of hiring someone to do this stuff for them!