At this point in the series, we’ve covered some basic CSS syntax, and learned to see how CSS rules are affecting the appearance of a web page element and test some changes. Now, we’re going to look at some techniques for creating new CSS rules to change the appearance of your page elements.
Creating Effective CSS Rules
Using the browser developer tools, you can make temporary instantaneous changes to a web page. This is a big help in determining what your new settings need to be. The HTML/CSS pane also gives you the ability to write new CSS rules, which once you see that they do what you want them to, can be saved and used to change the layout.
A good way to figure out what your new CSS rule should be is to create a new rule in your browser, then adjust it so it’s doing what you want. Once you have your rule formulated, you can copy it to the CSS settings so it will be permanently incorporated into your WP site.
Creating a New CSS Rule
To make a new CSS rule in the browser developer tools, use the inspector to select the element you want your rule to affect. In Chrome, look at the top of the CSS pane, you’ll see an “add rule” icon (in the yellow circle). In other browsers, you need to right-click in the CSS pane, and select “new rule.”
The browser will create a new rule for the current page in the CSS pane, giving you a selector to start with.
Crafting a Good CSS Selector
Generally, the selector the browser tool creates for you when you add a new rule is not a good one to use. It will be “overqualified,” meaning it has too many terms. It is an essential good practice in CSS to use the simplest selector that will get the job done. Using overqualified selectors can lead to situations where the stylesheet gets too complex and hard to read and modify. Best to keep things simple.
The art of building good CSS selectors is much deeper than we can get into here: CSS programmers spend a lot of time learning good techniques to use. In this article, I’m offering a simplified approach that you can use without too much sweat.
There are generally two situations you’re going to face when creating rules to customize page elements: creating a rule selector from scratch or creating a specialized, overriding version of an existing rule. You’ll know which situation you face when you select your element. If the top rule in the CSS pane has several qualifiers (like class names or ID’s) that you will probably be creating an override rule to that rule. If the top rule is more general (like just an element selector) you’ll be creating a selector from scratch.
Creating a New CSS Rule Selector
To create a new rule selector, it’s important to understand the elements you want to affect. If, for instance, you have several input elements you want to resize, you’ll want to create a selector that includes all the input elements so you only need one rule to set all of them.
To create a new rule selector from scratch, I suggest you start with the element. In the case of input elements, it’s usually a good idea to indicate the type of element you want to affect, since there are several types that display differently and will need their own rules.
input[type="text"]
Will select only text-type input elements. Now, go up the hierarchy and look for a class name that uniquely describes the functional context of the change. For instance, if you’re modifying the signup form in Participants Database, you might want to use the class “pdb-signup” which is only used in signup forms:
.pdb-signup input[type="text"]
Finally, it’s a good idea to add a term that will define the layout context. This may be needed if, for instance, you want your element to be a different size if it appears in a sidebar:
#sidebar .pdb-signup input[type="text"]
The reason for going through all of this is to create a rule that will affect only those elements you want, but also gets as many of them as possible with one selector. If you can’t get them all with one selector, add more selectors to the rule:
#sidebar .pdb-signup input[type="text"],
#sidebar .pdb-record input[type="text"]
It’s always best to combine selectors for elements that will share a specific setting. In this case, you might want the text inputs to be the same width in both the “signup” and “record” forms. This way, you have that setting in only one place, and it’s a lot more efficient.
Creating Override Rules
When you’re dealing with an element that already has a highly qualified rule (i.e., one with a lot of terms) targeting it, you’ll need to create an override rule. The easiest way to create an override rule is to copy the selector of the rule you’re overriding, then add a term to the selector so that your new selector is more qualified. The more qualified selector will override the less-qualified one.
When adding a new term to a selector, it’s usually most effective to add a term from higher up in the hierarchy, so it becomes the first term in the selector. We’ll illustrate that with an example.
An Example of an Override Rule
Let’s say you wanted to change the layout of the Participants Database list search control: you want the elements of the search control to line up vertically. If you click on the search input, you’ll find this rule at the top:
.pdb-searchform input[type=text],
.pdb-searchform input[type=submit],
.pdb-searchform select,
.pdb-searchform label.checkbox {
margin: 0 5px 0 0;
}
To make the elements line up vertically, it is enough to change the layout of the input element from “inline” to “block,” but you’ll also need to change the margins, and the margin for that element is already defined in the existing rule. You need to override that rule to change the margins of your input element.
The first term in the selector you’ll be overriding is .pdb-searchform. You’ll need to find another classname up the hierarchy from that one, so look at the HTML pane where the input element is selected and go up the chain to find the element with class “pdb-searchform.” Your overriding class needs to come from above that level. If you go up one level from .pdb-searchform, you’ll find a wrapping div element with several classes, including “pdb-list.” That will be a good one to use because it won’t show up anywhere else but around the list display of that plugin. Add that term to the beginning of your new selector:
.pdb-list .pdb-searchform input[type="text"]
When you put your layout change and new margins in to the rule, the new search control layout will be in effect:
.pdb-list .pdb-searchform input[type="text"] {
display: block;
margin: 8px 0;
}
Next up: Now that you know what your new CSS rules need to be, how do you put them into effect? We’ll also cover a few general concepts that help in solving common CSS problems.