WordPress CSS Basics

I get a lot of support questions for making changes to the layout of my plugin, Participants Database. While the whole subject of the use of CSS to format web pages is vast, I’m going to try to describe some simple techniques so users with limited CSS skills can make changes.

In part one, I will lay some of the groundwork, preparing those unfamiliar with CSS for the techniques that will follow.

How CSS Works

The simple explanation is that CSS is a set of rules that determine how HTML elements will be presented on a page. Generally, these rules will be loaded by the web page from a CSS file, but they can also be embedded in the HTML. Each rule has a selector that determines which elements it will affect. The rule contains one or more declarations which include an attribute and a value. If the declaration is in effect, it will set the attribute of the affected element to the value.

It’s important to understand how selectors work: on the simplest level, they name the element (or tag) that they will act on. They can get specific about the element by naming the elements that contain it, or the element’s class, or another attribute. These can get quite complex, but the important thing to remember is that more specific selectors override more general selectors.

For example, consider these two CSS rules:

a { color: red }
.comment a { color: blue }

The first rule makes all text inside of an “a” tag red, while the second rule specifies that text inside an “a” tag that is inside of a container with a class of “comment” would be not red, but blue. The selector is more specific, so it takes precedence.

If there are two rules of equal specificity, the latter rule will override the former. For the kind of changes we’re discussing in this article, this won’t come into play, but it’s good to know.

CSS Selectors Create a Hierarchy of Rules

All the CSS selectors on a web page can set up a tidy hierarchy so that the less specific selectors are setting general attributes, while more specific selectors are for special cases. In practice, this can be quite complicated: a typical WordPress page will have hundreds of CSS rules affecting it’s presentation.

It often happens that all the selectors active on a page add up to a big mess. CSS selectors have a well-defined structure, but it’s very tolerant of poorly written code, so there can be a lot of unnecessary complexity. Adding to the complication and mess in WordPress are stylesheets added by plugins authored by other developers with different styles and levels of ability. This makes making changes to the presentation more difficult, but there is help available to make it a bit easier to get the result you want.

Making Changes to a WordPress Site Layout and Formatting

Generally, unless you are a web designer, you will be making your changes by adjusting the theme settings. In some cases, you may need to add a few of your own CSS rules, and this is what we’ll be attempting to provide some help with.

If you are adding your own CSS rules, these rules will often be placed in a settings area for additional CSS rules. For instance, if you have Jetpack installed, there is a setting under the Appearance menu called “Edit CSS” where such rules can be placed. For the Participants Database plugin, there is a tab in the settings page where rules that will be applied only to pages with plugin output can be placed.

For more extensive presentation and structural layout changes, you will need to rely on the theme settings. Unless you’re prepared to learn the art of CSS programming, for major changes, you’ll be stuck with whatever the theme developer allows you to customize.

Some things are a lot harder to change than others

One of the most difficult things to grasp at first is that some things will be almost impossible to change with CSS, while others will be very easy. Mostly, it’s helpful to remember that there will be some changes you want to make that will end up being impractical, and that the problematic ones are typically formatting changes, where you want to change the location or size of elements on a page.

Next: Inspecting Page Elements

At this point you have a general idea of what CSS is and how it works. I’ve briefly described how a set of rules interacts through the hierarchy of selectors to determine how the content is presented. I’ve also gone over some WordPress specific stuff like where CSS changes can be put, and the limits to what you can do with a few CSS rules.

Now, we are ready to analyze specific elements and CSS on a page so we can understand why an element is displayed as it is and how it can be changed it to display the way you want.