Using a custom CSS plugin allows you more control over your WordPress site if you aren't using a custom-built theme.

Are you using a WordPress theme, free or premium, that is almost what you want but needs a little something? Maybe the GUI options on the backend don't allow you to change that font size or header margin, for example.

One of the easiest ways to solve this is to install a custom CSS plugin such as Simple Custom CSS. This straightforward and lightweight plugin adds a menu option under Appearance called "Custom CSS". Click that brings you to a screen that looks like this:

If you've done much coding before the numbered lines will be familiar. Basically, how custom CSS works is this.

When a user accesses your site their browser reads the theme's stylesheets (among other things) to compile the look of the site. Anything you place in the custom CSS area gets loaded after the main stylesheet. Therefore whenever you reference a variable mentioned in the original stylesheet it will use your custom CSS version instead.

If you want to change the size of your H2's, for example, creating a line like: h2 { font-size: 20px; } will tell the browser to use that size instead of whatever the original stylesheet said.

Using !important

Sometimes, depending on how a theme is built and where variables inherit values, the browser will actually not acknowledge your custom changes. Using the !important designator in your custom code will force your version to be used.

Basically !important tells the browser that this value supersedes any other reference to that variable. For instance like above, if the font size for H2 is declared other places in the stylesheet but you use !important here, it will tell the browser to ignore all other places where a font size is declared for H2.

Use the !important after the command but before the semicolon at the end of the command, like this:

h2 { font-size: 20px !important; }

Finding Variables for Custom CSS

It's not always clear what the name of a variable is. Say for example you'd like to increase the margins around where your theme places your header image, but you're not sure what variable name the theme gives the logo in the stylesheets.

In browsers like Chrome or Firefox you can simply right click on the element you're curious about and select "Inspect" or "Inspect Element".

This will open up a dialogue box in your browser showing multiple layers of stylesheet elements and, in a lower box, their values. As you move your cursor through different variables in the code you'll notice the corresponding on-page elements become highlighted. This can help you narrow in on the correct variables.

Also note that whatever you right clicked on to get here will begin highlighted in the box's code.

In this case we can see an "img src" command nested under the div id "logo-container". In the box beneath it we can see the margin and padding settings. What's nicer is that you can select the numbers in each case and type in a new variable and it will reproduce the element in real time on-page using that variable.

So if we changed the margin to 10px there, if we indeed found the right element, we'd see the margin around the logo increase. This change is for demonstration only and will go away once the page is refreshed. But finding the right config here allows to immediately plop that into custom CSS and not have to do a bunch of back and forth.

In this example we'd use "#logo-container img { margin: 10px; }" in the custom CSS to change the logo margins.

We used the hashtag before the element ID to affect only that ID; div classes are denoted with a period before the name like ".name".

When finished with custom CSS edits, press the "Update Custom CSS" button on the associated screen. Changes should be live immediately, but may require you to flush your page cache if you're using caching plugins.

Another Advantage of Custom CSS for Theme Updates

Often when a theme updates it copies over a new version of the style.css (stylesheet). That means anything you'd customized right in the code would be lost, potentially breaking your site depending on just what you'd changed.

Since the code contained within your custom CSS plugin is separate from your theme, it will be unaffected by the theme updating. And if you do break something playing around, all you have to do is go back into the Custom CSS and change it.

You can also reap this advantage with Child Themes, which we'll cover in a future post.