How to Apply a CSS Rule in WordPress: Basic CSS Part 3

Welcome to Part 3 of our 3-part series on writing basic CSS in WordPress! In Part 1 we covered the fundamentals of basic CSS and the anatomy of a CSS rule. In Part 2 we showed you how to practise writing your own rules to make temporary changes to a webpage. Now for Part 3 we’ll tackle making permanent changes to your website.

The hardest part of wrapping your head around basic CSS is behind you. This will actually be very short and sweet! Now that you’re comfortable finding the HTML element you want to target and writing a rule to change it, all we have to do is find where (and how) to place it. That will require 1 new tool (maybe 2) and a bit of snooping around in the WordPress files on your server. We have you covered with directions every step of the way, so no worries. Let’s take a look at how to do this!

Step 1: The Tools of the Trade

What are the right tools for the task? Glad you asked. We’re going to need an FTP client to access your WordPress install (assuming your site is hosted and not local), and a text editor to edit the appropriate file once we track it down.

My favorite program for FTP access is Cyberduck, and my text editor of choice is Sublime Text:

If you’ve not used FTP before or you’re not entirely sure you remember how, we have a nice writeup on learning to use FTP here on wpninjas.com. It’s very easy. Pause to get that read if you need. Now that we have our tools together, let’s move on.

Step 2: Tracking Down or Creating Your Child Theme

FTP into your server now and navigate to wp-content>themes. Sublime Text or the text editor of your choice will be needed to open the files we’re going to work with now.

Since we need to make edits to your theme, those edits need to be made in your child theme’s style.css file. If you’re not using a child theme, make one now. If you don’t know how to do that, we have a handy dandy walkthrough on how to make a child theme right here on wpninjas.com. Told you we have you covered. 🙂

In case you’re thinking about skipping the child theme part and going directly to your theme’s style.css file, here are a few reasons NOT to do so:

  1. You will lose all your work the next time you update your theme.
  2. You will lose all your work the next time you update your theme.
  3. You will lose all your work the next time you update your theme.
  4. If you don’t update your theme, you open the doors of your website to malicious outside attacks. Don’t get hacked because you didn’t update your theme (and plugins)!

Now that we’re clear on that, let’s make our basic CSS edits!

Step 3: Making Your Basic CSS Edits in Your Child Theme

In creating your child theme, you created a custom style.css which you then enqueued in your functions.php file. It’s that custom style.css that we want to edit. Here’s the example custom style.css that we created in the child theme walkthrough above:

Lines 15 and 16 there are commented lines indicating that theme customization should take place below that line. Let’s look back at the basic CSS rule we wrote in Part 2:

Literally all you’re going to do is copy and paste that rule below the line indicated in your child theme’s style.css. You’ve already tested it and know it works! Here’s what it looks like together:

basic css rule written into child theme style.css

Save your style.css and clear your browser’s cache. You may have to also clear the cache for any caching plugin you have installed as well. If you don’t and your page is cached, you’re going to be viewing the cached page from before the styling rule was applied. Refresh your page and you’re good to go!

Step 4: Pat Yourself on the Back!

Congratulations, you can now style your own WordPress website using basic CSS! This opens up a world of opportunities for you to express your creative side through visual artistry. Maybe that’s a bit grandiose for some of us- I might be able to edit a webpage, but no one that knows me would let me pick out a color scheme for one! So for those of you that have an inner artist waiting to be released, now you have the knowledge and tools to create the cool things in your head. For the rest of us, we’ll make do!

Questions about anything in this series? Has this been helpful for you? We can chase the CSS rabbit further down the hole, and may well do so in future articles. If there’s anything specific you’d like written about, questions, etc, let me know in the comments!