[U]sing WordPress to design your website has never been easier. Themes like Divi and ProPhoto give you almost infinite control over your how your website looks. But there are always finishing touches that can take a website from good to great and often a little CSS is sometimes the only way to do that.

If you are complete beginner when it comes to tweaking CSS code, then this post is designed to take the fear of out it. I promise we’ll take it slow!

WHAT ARE HTML & CSS?

HTML (Hyper Text Markup Language for my fellow nerds) is what your WordPress website is made of. When you write a blog post, using the WordPress editor, technically you’re creating HTML. Click into the Text Editor and you’re looking at raw HTML. Try adding a link, making a word bold or italic and then see how that looks in text view. Congratulations – you’ve just added some styling.

You could, of course, style every single part of a website that way but it would take forever and get very messy, very quickly. Instead, WordPress themes group lots of HTML elements together and style those groups across the whole website. For example, every theme includes simple controls which allow you to control the font style and size you use for all headings. And the way that a theme does it, is by creating a master style file called a stylesheet.

We invest in WordPress themes because we love the way a theme looks out of the box, but occasionally, as we are tweaking it to suit our own taste, we find ourselves wanting to add finishing touches that aren’t covered by the basic theme controls. And that’s where CSS comes in. CSS (Cascading Style Sheet) code is found in the theme’s stylesheet and it’s relatively straightforward to identify and tweak the styles you want to override with some simple tools.

Before we start, a word of caution. It’s important to NEVER edit the core files of your main theme. eg. Divi or ProPhoto, because when you update your main theme, your changes will be overwritten. Luckily there are plenty of ways to avoid doing that, either by using the custom code area of your theme or by creating a child theme. Both methods are covered in the video tutorial below.

CSS BASICS

Before we dive into the video tutorial, let’s have a quick look at the elements every CSS snippet needs to have. We’re going to deal with the whole ‘class or id’ thing in the video tutorial, but I just want to draw your attention to the details in the snippet. When editing/writing CSS, punctuation is everything. If you’ve added a code snippet and it’s not working, make sure you have every last colon, semi colon and bracket in the right place.

#footer-info {
    font-style: italic !important;
}

Punctuation lesson over, let’s watch the video. If you need to fast forward to the end, you can find my CSS cheat sheet ready to download at the end of this blog post.

Have a go with Chrome Inspector Tools, download the cheat sheet below and try your hand at a few CSS tweaks.

DOWNLOAD THE CHEATSHEET

If you enjoyed the tutorial, check out Siteschool, our step-by-step course which teaches you everything you need to know about building your own WordPress website. Find out more…