A theme only takes you so far.

In 2023, WordPress powers 43% of the web, boasting over 800 million websites built in the program. Its relatively simple interface and customizable themes make it the ideal choice for most people who need a website. 

The benefit of a theme is that your website comes pre-styled so that you can focus on writing your content. Most themes allow for sufficient adjustments to make a site work for its particular purpose, but often, brands need to break away from the confines of their chosen theme. A template can only take you so far, after all. And for those times, custom CSS styling is built right into WordPress!

In this article, you’ll learn how to access custom styling in your wordpress.org site and how to use the Inspect tool to target specific elements of your website and make adjustments to their CSS rules. 

If you need an introduction to CSS, skip to the Actually Using CSS section below. I’ve included a link to Part 1 of my CSS guide. For those of you who are already comfortable in the language and just need to access the custom styling page in WordPress, let’s move forward.

Step 1: Navigate to Appearance

From the WordPress dashboard, find the appearance tab in the sidebar and click on Appearance

Step 2: Navigate to the Custom CSS Page

Choose the sub-menu item, Additional CSS. And you’re there!

Step 3: Here’s Another Way to Get There

Alternatively, you can click on Appearance, choose Customize, and then find Additional CSS in the sidebar on the next page.

Studio O’Riley Screenshot – The WordPress Dashboard – May 24, 2023

Actually Using CSS

In order to use CSS, you need at least a basic understanding of HTML. If you’d like, you can read Beginner’s Guide to HTML – Part 1: Structure. The gist is that you can apply styles to any element on a webpage by referencing it’s tag name, class, or ID in CSS. To learn more about that, check out Beginner’s Guide to CSS: Part 1 – Introduction and Syntax

WordPress uses PHP instead of HTML, but the principles are the same. You need access to your tag names in order to edit their appearance through the DOM and it’s a pain to access the files directly in WordPress, so most developers use the Inspect tool in the browser instead. 

In most browsers, you can right-click on an element of any webpage (or anywhere on the page), and choose “Inspect” from the menu that appears. This will open the inspect tab, which depending on your settings, will appear either at the bottom of your page or on the right side. You can use the “Select” tool to choose an element on the page: 

The chosen element will be highlighted in the inspector panel. You can view the current applied styles in the Styles tab, or find the relevant HTML tag, class, or ID for your use in the WordPress Custom CSS panel!

Studio O’Riley Screenshot – How to Use the Inspect Tool – May 24, 2023

Wrapping Up

Don’t be afraid of CSS. It’s actually a very simple language, even if it looks daunting. With even a few lines of CSS, you can make drastic improvements to your whole site, add beautiful features and animations, and create a better experience for your users. 

Thank you for reading! I like to think of this blog as “interactive,” and usually tutorials bring up as many questions as they answer for readers, so feel free to ask questions in the comments. I always answer, and I’m happy to write a whole new post about subjects that enough people express interest in!

Leave a Comment

Your email address will not be published. Required fields are marked *