Basic WordPress CSS: Beautiful Results in Minimal Time, Part 1

One of the most beautiful features of WordPress, and the reason it has grown to command a staggering 26+% of the world’s websites, is the freedom it gives its users. We all know the stock face of a fresh WordPress install, from WordPress Classic to Kubrick to Twenty Seventeen, but they’re rarely seen in the wild. You can do you in WordPress, as the tens of millions of fantastically unique WordPress websites around the world testify. Countless themes to experiment with can help you find your own personal niche in this abundant diversity, but making a site well and truly your own is going to require a bit of tinkering of your own. That’s where a working knowledge of basic WordPress CSS becomes invaluable.

CSS is not scary. You do not have to be a developer/coder/programmer/[insert technical sounding title of your choice here] to learn basic WordPress CSS. Like many things, if you want to chase CSS down its own rabbit hole to see how deep it goes, it can get really complicated. But, to learn enough to start tinkering on your own is perfectly manageable. You can do it, and we’ll show you how.

This will expand into a 3-part series on WordPress CSS in the very near future. In this installment we’ll look at basic WordPress CSS: what a CSS rule is, the anatomy of a CSS rule, and how rules can be applied. We’ll follow up in Part 2 with actually getting you some zero-risk practise writing and applying CSS rules, and then in Part 3 with how to apply your new knowledge with WordPress CSS directly to your WordPress site. Let’s get started!

What is CSS?

Better question: what’s a webpage made out of? Answer: HTML and CSS (basically). HTML describes the basic structure of a webpage. When you click the Text tab in the Post or Page Editor inside WordPress, you can see some of that structural HTML markup, like the <li></li> tags that surround bullet point list items, or the <a></a> tags that surround every link you place in the text. Those tags are telling your browser how to structure those items on the page. HTML defines the framework, wire-skeleton structure of a webpage.

CSS (Cascading Style Sheets, if you’re wondering) is the artistry that covers those bare bones- the color of a background, the font of the text, the width of the margins, the height of this widget or that, etc. HTML is structure, and CSS is display. Specifically, CSS is the art of associating display rules with HTML elements.

CSS is written as a rule that defines how an HTML element will look when it is displayed on a page. When we’re writing CSS then, we’re writing rules that target specific HTML elements. Let’s move on now to look at the anatomy of a CSS rule.

The Anatomy of a WordPress CSS Rule

Here’s an example rule that we can break down:

CSS rules come in 2 parts: a selector and a declaration. The selector selects the HTML element that we’re going to target with the rule, and the declaration states the display change that we’re going to make. In this rule, #nf-field-443 is the selector, and background-color: #ff0000 is the declaration.

This rule targets Ninja Forms field 443, and tells your browser to display it in the color red (if you’re not familiar with the hex code color system, check this out). Like so:

WordPress css example, red button on page

The declaration itself breaks down into 2 parts as well: a property and a value. The property is the quality of the targeted element we want to change, and the value is what we actually want to change it to. In this case, we want to change the background color to red.

A note on good form when writing CSS rules: The declaration is always wrapped in brackets {}. There is never a space between the selector and the opening bracket. The declaration should be indented and a line down from the selector. The closing bracket should be one line down from the declaration. You can see this form in the example above.

In Summary, the parts of a CSS rule are:

  • Selector (states the HTML element you’re going to target in the rule)
  • Declaration (states the display change to be made)
    • Property (specifies exactly what quality of the element we’re going to change)
    • Value (specifies the change to be implemented)

How a CSS Rule is Applied (External v. Internal CSS)

There are two different ways to apply any CSS rule. The most common method is to have an external .css file that is used only to apply styling, and all your CSS rules can be written there. Another is to actually write the rule in the HTML file that is used to render the page. Let’s look at both those options now.

External CSS

External CSS is widely considered the best practise solution for styling. In WordPress it’s how styling is handled by your theme. The next time you’re in your WordPress install, check out your theme’s files in wp-content>themes>yourtheme. Chances are there will be a file inside named style.css. That’s your external CSS style sheet. Much of the styling rules applied to your site’s pages will be written there.

wordpress css style.css

There are several big advantages to handling CSS in an external stylesheet:

  1. A central location for all of your styling- you know exactly where the rules affecting an element is kept if it ever needs adjusting.
  2. Cleaner code- external css makes your pages’ HTML a lot easier to read
  3. Separation of concerns- you’re keeping your content separate from your style and it’s easier to deal with both

Internal CSS

The alternative to using a standalone stylesheet is to directly modify the HTML that is used to render the element you want to target. Instead of keeping your rules in a style.css doc, you’d write them directly into the HTML. In days gone by this was easier to manage as pages were static and there was a single HTML doc that would handle a page. You knew right where to go to reference the styling you’d added to that page.

WordPress renders pages dynamically using PHP, meaning the HTML that renders a given page is going to be spread out across docs like header.php, footer.php, sidebar.php, etc. That makes Internal or “inline” CSS much more challenging to keep up with, and one of the reasons that external CSS is considered best practise in WordPress.

Working with Selectors

We’ll close Part 1 with a few extra words on CSS selectors. First, just to reiterate, remember that a selector is the opening part of any CSS rule in which you’re stating the HTML element that you want to change the styling for. You can find a list of common selectors here. In Part II we’ll be talking about how to identify HTML elements and choose the right selectors to use, but it’s important to understand a few basic things about how they work before we get there. So…

  1. CSS selectors are case sensitive. When writing a rule, you must write to match the targeted HTML element exactly.
  2. Multiple selectors use precedence to determine order of application: When multiple selectors target the same element, there are rules to determine which takes precedence. If two selectors share a property (such as background color) that declare separate values (such as one saying blue and the other saying green), only one will take precedence and display. Below are the rules for how precedence is determined.
    • The Last Rule: If two or more rules have identical selectors and properties, the value of the last rule written will be applied. For example, in the below snippet, green would take precedence over red as it is written last.
    •  Specificity: If two or more selectors target the same HTML element, the more specific selector will take precedence. For example, in the below snippet, both rules change the color of text within a paragraph, but the second rule applies only to <a> elements (links) within a paragraph. Both would apply, with links being blue and the rest of the paragraph’s text being red.
    • !important: any rule that includes !important in the declaration will take precedence over other rules.

That’s it for WordPress CSS this week. Hopefully you’ve found this helpful in wrapping your head around basic CSS. With this foundation built, next week we’ll turn to learning how to identify elements on a page, choosing the right selector for the task, and actually writing CSS rules for stuff you want to change. Questions? Comments? Let me know below!