There will be times when you are working on a WordPress site when you want to add custom CSS.
Why might you want to do this? It could be for any of the following reasons:
- To add a new style to a theme which hasn’t been defined (for example, adding a new media query for a particular breakpoint).
- To change the style of an element within a theme you are using.
- To add to or modify a plugin’s default styles.
In the first and second instances, if you just have a small amount of code to change, adding a snippet of custom CSS is usually the simplest way to achieve the effect you desire.
We’ll soon look at the different ways to add WordPress custom CSS, but first let’s look at how CSS works.
The CSS Cascade
The cascade is the rule set that decides which out of many styles will be applied. Because generally only one style can be applied to an element, one CSS rule has to win over the others.
There are a few exceptions and workarounds to this principle, such as this method to create multicolored backgrounds in CSS:
But in general, the rule holds.
Two things help the browser decide upon which style to apply: breadth and specificity.
- The correct breadth = the right choice of HTML element(s) and not any others.
- The right specificity = your CSS declaration trumps other ones which target the same element(s).
To avoid tearing your hair out, read Fred’s post on changing CSS the right way. It has practical examples showing you how to target your styles correctly.
If you want to go deeper on CSS specificity, I recommend reading CSS Specificity Wars by Andy Clarke, which explains this concept beautifully. (It’s even more rewarding if you are a Star Wars fan!)
How CSS is Applied Within WordPress
If you’ve ever inspected the code of a typical WordPress site, you’ll have noticed that there are typically many stylesheets loaded from multiple sources.
How does WordPress decide which to load first? It has a specific order in which CSS styles are enqueued.
The general order is, from first to last:
- Child theme
- Parent theme
The other determining factor is hook priority. If you’re not familiar with hooks, take a read of our article on WordPress hooks for a primer.
In a nutshell, hooks are spots in themes or plugins where functions can be run. As multiple functions can be attached to hooks, WordPress needs a way to determine the order in which they will be run. That’s where priority comes in.
The default priority for a hooked function — or callback — is 10. A callback with a number lower than this will run earlier, and a function with a higher number will run later.
For CSS styles, this means that if you are trying to override a style, you want your code to be loaded with a greater priority than the original stylesheet.
This article was written by Claire Brotherton and originally published on WPShout.