Disclosure: This post may contain affiliate links. Purchasing a product through one of these links generates a commission for us at no additional expense to you.
Want full control over your site’s design?
While there are lots of user-friendly customization tools for WordPress, a little CSS can help you immensely.
For instance, you may want to increase the font size of the post titles or change the color of your links. It seems like overkill to install an entirely new plugin for something so simple.
CSS is the solution.
With a few lines of CSS, you can quickly take care of small style customizations. And while it is code, it’s not nearly as complex as a programming language like Javascript or PHP.
If you’ve written a little CSS here and there, you’ll benefit greatly from this guide, but even total newbies can find some practical tips here. And you can get a lot done if you know a few CSS tricks for advanced customizations.
Psst! Read to the end if you’re a Compete Themes customer. We’ve got a bonus freebie for you (especially helpful for newbies).
A quick introduction to CSS
If you’re already familiar with CSS I don’t want to bother you with a long overview. If you’ve never worked with CSS or if you’re not even sure what CSS is, please check out our article on the topic first:
What is CSS and How Does it Affect WordPress?
That will cover the basics of why CSS is used to style sites and how it’s applied.
How to add CSS to your WordPress site
There’s one big mistake that WordPress users that are new to CSS make:
They customize the theme files.
For example, someone using the Challenger theme might place their CSS edits directly in the style.css file accessed from the Appearance > Editor menu.
The problem with editing the style.css file is that you’ll lose all of your changes if you update to a new version of Challenger. Trust me, losing code changes that took a long time to make can be incredibly disheartening.
A better way
There is a better way to add CSS to your site where it will never be overwritten. In addition, this code is added to your site in a way that makes it easier to override the theme’s styles.
To add CSS to your site, you want to open up the Customizer (Appearance > Customize) and click on the Additional CSS section.
If you open up this section, you’ll see a text area where you can add your code. WordPress will include some tips here, but you can click the Close link to remove it and only showed the code input.
You can enter and save any CSS you want to add here.
The code you add here will update the site’s appearance right away in the preview. Once you’re happy with your changes, you can save your edits.
The added bonus of placing CSS here is that you get to watch the updates take place to live, so you can test out different code quickly to find out what you like.
Now that you’ve gotten a look at how to add CSS safely to your site, let’s cover the basics of writing CSS!
Pro tip: don’t worry about breaking your site. If you make a bad edit, you can simply delete the CSS you added. It’s impossible to entirely break your site or lose access to the admin menu by adding CSS in this way.
How to find CSS selectors
If you’ve ever written CSS, you know that the first step is to choose a selector to tell the browser which element on the site you’re targeting. In the screenshot above, I’m targeting all elements which have the “site-title” class.
If you aren’t sure how to use CSS selectors, check out this great introduction to CSS selectors from SitePoint.
Now here’s the thing…
Even many experienced WordPress users go about finding selectors all wrong. They check the style.css file to find a selector already used by the theme. This is tedious and you may not even find an appropriate selector for making your customization.
Let me offer you a much more productive process.
How WP pros find CSS selectors
When writing CSS, you first need a selector to tell the browser which element you want to edit. While you could check the stylesheet in your theme, it’s much easier to simply use your browser’s web developer tools to find them.
Here’s an example of what I mean:
You can see the classes and IDs of every element in the open developer tools. You can then use any combination of available classes and IDs to write your own custom selectors.
I go into much deeper detail of this process in this tutorial:
How to Find CSS Selectors on WordPress Sites
You’ll learn how to access your browser’s developer tools, how to navigate the HTML, and how to find the CSS selectors you need.
CSS properties and values
Now that you have a much quicker way to get any selector you want and you know how to add code into the Additional CSS section in the Customizer, the only thing left is to choose the properties you want to change.
For instance, if you wanted to target the site title in Challenger and make the font larger, you could do this with the font-size property. That CSS statement might look like this:
.site-title {
font-size: 32px;
}
If you’re not very familiar with CSS, you’ll find this list of CSS properties especially useful. You can search that list for whatever quality you want to edit (background color, font size, borders, etc.).
FREE pre-written CSS for our users
CSS newbie or master, I have something I think you’ll like…
If you use any of our themes, you’ll love the pre-written CSS snippet libraries we’ve built. For instance, the Tracks CSS Snippets Collection has dozens of snippets you can copy and paste into the Additional CSS section to customize your site:
This makes it very easy to customize your site with CSS even if you’ve never written CSS before. You can simply copy & paste any snippet you want and then change the value to whatever you want.
To find the CSS snippets for your theme, visit the Support Center and select the theme you’re using. Then click on the View CSS Snippets button at the bottom of the sidebar:
You’ll find a bunch of pre-written snippets on the next page for whichever theme you’ve selected.
Conclusion
I don’t expect all Compete Themes users to be CSS masters and for someone who’s still mastering the basics of WordPress, I understand how intimidating this tutorial might have been.
That said, it’s certainly helpful to know about the possibilities of customizing with CSS. And furthermore, the snippet collections make it very easy to dip your feet in with some copy & paste code.
You might come back to this in the future when you’re feeling more prepared to customize your site with code. In which case, bookmark this page for later so you can come back and give it a shot.
