WordPress 4.7, which launched on December 6, 2106, makes customizing the CSS on your site a whole lot easier. Easier enough that I think it’s worth an explanation. So that’s the topic of this Quick Guide. If you want to know even more about the cool new developer-relevant features of 4.7, check out Fred’s post from Tuesday.

Without further ado, here’s the video Quick Guide about using the awesome new “Additional CSS” section of the Customizer that WordPress 4.7 added into WordPress core. That’s right, no longer do you need Jetpack or another plugin to add your own CSS to your WordPress site!

Adding New CSS to Your WordPress Site, The Easy Way

Here’s what we did, in a step-by-step process:

1. Be logged in to your WordPress site.
2. When looking the front end, click the “Customize” link in the top menu bar. If you’re looking at the back of your site, click on “Appearance > Customize” in the left side bar.
3. In the Customizer, you’ll see a section labelled “Additional CSS”. It’s probably at the very bottom of all your options, though that’s not 100% guaranteed to be the case.
4. Into the large text-field provided there, write your CSS, same as you always do. As you write, the rules will show on the right panel in real-time. They will not show to your visitors as you make the changes, though.
5. Click “Save and Publish” to save your changes and make them show to your visitors. (You may need to purge a cache for all non-logged-in visitors to see the changes, depending on your server setup.)

To really get the right CSS, you’ll probably want to use your browser’s Inspect Element feature. Here’s a Quick Guide about using it in Chrome.

If the changes you’re able to make with CSS don’t get you where you want to be, you may need to use a child theme. This is especially true if you find you need new information on the page or if you want core things about how it works and links to be different. If that’s the case, here’s a guide to making a WordPress child theme.