When you first get your hands on your first self-hosted WordPress site, you will likely be exploring themes like crazy. And no doubt you’ll find one that is very close to what you want, but you might want to change a few things up with the way it looks. That’s where you’re going to want to make CSS edits in WordPress.
What is CSS?
CSS stands for Cascading Style Sheet, and web design these days centres around these special files. They dictate how every element on the page should look, from the fonts used, to the color and size of every element. Every WordPress theme has a CSS file; it’s a requirement. But before you go looking for it and trying to edit it, let me teach you a few things. Firstly, it is best not to edit your theme’s CSS file. You weren’t expecting that, were you!? The best way to do it is to create a child theme and edit that theme’s stylesheet. This allows theme updates without losing your edits and avoids the risk of doing something irreversible to your theme files, so take a few minutes and create a child theme first. This has a further benefit because of the way CSS works. So let me give you a basics.
The basics of CSS
CSS files should be loaded in the head of a web page. This is so that the browser knows how each element should be styled as they are loaded, rather than waiting for whole page to load and then making it look right. For that reason, you’ll see lines like something this in the head of your HTML document, which are the stylesheets being loaded:
Now, there is an importance to the order in which stylesheets and rules are loaded, which is where creating a child theme is useful. If there are conflicting rules (i.e. the same rule declared in more than one place), the last rule loaded will be used. When you create a child theme, the first thing you do in your stylesheet is import the stylesheet of the parent theme, so all of the theme’s original CSS is loaded first. Then you start making your edits below the import, thus superseding any existing rules in the parent theme’s stylesheet.
Structure and rules
A CSS file consists solely of a whole load of rulesets, and maybe some comments (marked by /* before the comment and */ after the comment). A ruleset is exactly what it sounds like; a set of rules. In its simplest form, this will consist of a selector and a property-value pair. The selector says which element the rule affects, the property says what aspect of the styling you’re going to set, and the value specifies how the property should be modified. For example, the following rule will create a red background for any element with a class of content:
There are two different kinds of selectors: IDs and classes. Classes are more generic as they can be used in several locations in one page, whereas IDs are very specific and can only be used once on any page. They are denoted differently as selectors in a CSS file. IDs are preceded by a hash/octothorpe (#) and classes are preceded by a full-stop (.). So for example, if you see these two elements in your page and you want to edit their styles, this is how you would achieve it:
Another thing to be aware of is that more specific rules take precedence (even if they are declared first). So for example, if you had HTML like this:
and the following CSS rules:
the h2 tag will appear blue, because the h2 ruleset is less specific than the .content h2 ruleset, even though it was declared first.
You should also notice that the CSS rules are taking a particular form. Each one starts with the selector, followed by a curly brace and then, on a new line, which is indented, the rulesets appear, with the property suffixed with a colon and the value suffixed with a semi-colon. And then the ruleset is closed on a new line with a curly brace.
This is the WordPress standard and there are more standards that you should be aware of. See the Codex CSS Coding Standards for more information.
Knowing which selector you need
Now that you know how to write a ruleset, you need to know what it looks like for your specific site! There’s two ways you can find the selector; you can hunt through the code, but since you’re a beginner, I’m going to recommend doing it the visual way.
I’m going to show you how to do it using the Chrome browser. You can also use Firefox with Firebug add-on to do largely the same process. Go to the page that you want to make edits to, right-click on the element you want to edit, and select Inspect Element. You’ll see a new console pop-up at the bottom half of the screen. This is an immensely useful tool. It will show you both the HTML for the page and highlight the element that you just selected, and then all of the CSS rules that apply to that element on the right.
You can also use the find icon to select other elements on the page and find the specific selector that you’re looking for. Note that once you select an element, a list of parent elements will appear along the bottom toolbar. In the image above, there are about 10, starting with html and body and ending with div.what-next and h2.That means that my chosen element is an h2 tag within a div with the class of what-next. So to target that specific element, you could write a rule like this:
If you look at the image above, you’ll notice in the CSS rules, that there’s already a more specific rule for this element (#content .what-next h2), so this rule would actually be ineffective in this instance. However, if you changed the selector to the same one that is already declared, it will work, and in this case, change the font size of that element.
Knowing which property to change
This is going to come with practice and research. Once you’ve found the element you want to change, you’ve got a couple of options. Either, the property you’re interested in changing (like the background) is already declared and it will become apparent what the CSS property you need is by looking at the existing rules in the CSS window.
If it’s not yet declared, you’ll need to do some research to find out the correct CSS property. An excellent resource for this is W3Schools. They have a little write-up on just about every CSS property available, so it should help you in formulating your rule.
Previewing and making changes
One of the best features about Inspector Tools is that you can preview changes before you make them live on your site, so you can both confirm your syntax is correct and see how it looks before you actually make the change.
To edit an existing CSS rule, double-click on either the property or the value in the CSS window and modify them and see the page change before your very eyes. If you want to add a new CSS rule, just use the + button next to Styles in the CSS window; it will default to a selector for the element that you have already selected, but can be changed if needed.
Once you’re satisfied that you’ve written the rule you need, you can actually put it into your WordPress theme. Go to Appearance > Editor and select your current theme. It should default to the stylesheet. Now you can place your new rule either at the bottom of your document, or if it is organised into sections, like navigation, header, footer etc., then place the rule into the appropriate section for easy reference later (recommended method – see Codex CSS Coding Standards).
Once you save the file, the change will be live on your site. Refresh the page and check that it looks the way you intended it.
I’ve tried to cover most of the basics here, but I anticipate that there will be questions, so please leave a comment so that we can discuss them as a community.